/* ==========================================================================
   Axon Education — Knowledge Base design system
   Extracted from the "Latest" design bundle. Tokens + components only; no
   page-specific layout lives here.
   ========================================================================== */

:root {
  /* Brand */
  --accent: #3B82F6;
  --accent-deep: #17335C;
  --accent-soft: rgba(59, 130, 246, .09);
  --accent-soft-2: rgba(59, 130, 246, .12);
  --accent-ring: rgba(59, 130, 246, .35);
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-deep));

  /* Canvas & surfaces */
  --canvas: #F4F2EA;
  --surface: #fff;
  /* Form controls are white. --sand is the old field cream, kept for the
     decorative surfaces (table headers, blockquotes, pager, section rows) that
     were borrowing --field before form fields went white. */
  --field: #fff;
  --sand: #FAF8F0;
  /* Readonly fields are white too, by request. They stay distinguishable by
     their muted bold text; flip this one value to bring the tint back. */
  --field-locked: #fff;
  --chip-track: #EAE8DE;
  --hover: #F0EEE4;
  --row-hover: #FAF8F0;
  --dark: #14231F;
  --dark-surface: #22352F;
  --dark-border: #31453E;

  /* Ink */
  --ink: #22302C;
  --ink-2: #32403A;
  --ink-3: #3C4841;
  --muted: #5E6B62;
  --muted-2: #556058;
  --faint: #8C968D;
  --faintest: #A5AB9F;
  --on-dark: #B9C2B6;

  /* Lines */
  --border: #E2E0D6;
  --hairline: #ECEAE0;
  --hairline-2: #F0EEE6;

  /* Status */
  --ok-bg: #EAF7EF;   --ok-fg: #16793C;  --ok-bd: #CDEBD8;
  --bad-bg: #FBEFEF;  --bad-fg: #B3382E;
  --warn-bg: #FFF4E0; --warn-fg: #8F6400;

  /* Type */
  --font: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Manrope', system-ui, sans-serif;

  /* Metrics */
  --shell-pad: 32px;
  --rowpad: 14px;
  --shadow-card: 0 1px 2px rgba(34, 48, 44, .03);
  --shadow-pop: 0 20px 50px rgba(34, 48, 44, .14);
  --shadow-accent: 0 12px 28px rgba(59, 130, 246, .4);
}

/* Compact table density (opt in on a wrapper). */
.axon-density--compact { --rowpad: 9px; }

/* --------------------------------------------------------------- base ---- */

body.axon {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body.axon *,
body.axon *::before,
body.axon *::after { box-sizing: border-box; }

/* Link default. `:where()` contributes no specificity, so this lands at (0,0,1)
   — enough to beat Bootstrap's `a` (same weight, and this file loads later),
   while still losing to every single-class component rule below. Written as
   `body.axon a` it would score (0,1,2) and silently override all of them. */
:where(body.axon) a { color: var(--ink); text-decoration: none; }
:where(body.axon) a:hover { color: var(--accent); }

body.axon input,
body.axon select,
body.axon textarea,
body.axon button { font-family: var(--font); }

body.axon input:focus,
body.axon select:focus,
body.axon textarea:focus {
  outline: 2px solid var(--accent-ring);
  outline-offset: 1px;
}

body.axon ::placeholder { color: var(--faintest); }

@keyframes axon-pop {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes axon-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes axon-glow {
  0%, 100% { opacity: .55; }
  50%      { opacity: .9; }
}

/* ------------------------------------------------------------- headings -- */

.axon-h1, .axon-h2, .axon-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}
.axon-h1 { font-size: 34px; }
.axon-h2 { font-size: 26px; }
.axon-h3 { font-size: 19px; }

/* Policies show Attachments as a bold label at body size (.axon-prose is 16px)
   rather than as a section heading. */
.axon-h-inline {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}

.axon-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faintest);
}

.axon-sub { color: var(--faint); font-size: 13.5px; margin-top: 3px; }
.axon-hint { color: var(--faintest); font-size: 12px; margin-top: 5px; }

.axon-page-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.axon-page-head > :last-child.axon-btn,
.axon-page-head > :last-child.axon-btn--primary { margin-left: auto; }

.axon-backlink {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}
.axon-backlink:hover { color: var(--accent); }
/* Public category pages sit the back link further above the heading block. */
.axon-backlink--pub { font-weight: 700; margin-bottom: 18px; }

/* ---------------------------------------------------------------- brand -- */

.axon-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: var(--font);
}

.axon-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent-grad);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 15px;
  flex: none;
}
.axon-brand-mark--lg { width: 38px; height: 38px; border-radius: 12px; }
.axon-brand-mark--nav { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.axon-brand-mark--sm { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }

/* The name and tag stack, as in the design. Column flex rather than relying on
   the elements themselves: the topbar and public nav mark them up as <span>s,
   which would otherwise run "Axon Education Knowledge Base" onto one line. */
.axon-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.axon-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.axon-brand-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--faint);
  text-transform: uppercase;
}
.axon-brand-tag--wide { font-size: 10px; letter-spacing: .14em; }

/* The Axon Education wordmark, the whole brand lockup on its own. It is a wide
   9.6:1 glyph, so height drives it and width follows; max-width keeps it from
   crowding the nav links on a narrow screen. */
.axon-brand-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: min(250px, 54vw);
}
/* The staff topbar packs the tab strip, search and account controls onto the
   same row, and .axon-brand does not shrink — so the wordmark runs smaller
   here, keeping the space the old mark + name lockup took. */
.axon-topbar .axon-brand-logo { height: 20px; max-width: min(200px, 48vw); }

/* -------------------------------------------------------------- buttons -- */

.axon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, filter .15s;
}
.axon-btn:hover { background: var(--hover); color: var(--ink); }

.axon-btn--primary {
  border: none;
  background: var(--accent-grad);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border-radius: 13px;
  padding: 0 20px;
  box-shadow: 0 10px 24px rgba(59, 130, 246, .35);
}
.axon-btn--primary:hover { filter: brightness(1.07); color: #fff; background: var(--accent-grad); }

.axon-btn--dark {
  border: none;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
}
.axon-btn--dark:hover { background: var(--ink-2); color: #fff; }

.axon-btn--ghost { background: var(--surface); }
.axon-btn--ghost:hover { background: var(--hover); }

.axon-btn--sm { height: 38px; padding: 0 16px; font-size: 13px; border-radius: 11px; }
.axon-btn--xs { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 9px; font-weight: 700; }
.axon-btn--block { width: 100%; }
.axon-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Square icon-only action button (table row actions). */
.axon-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--muted);
  padding: 0;
  transition: background .15s;
}
/* Icon sizing lives here rather than on each glyph: row actions are inline
   SVGs (width/height attributes, which CSS outranks) on most pages and
   Bootstrap icon fonts on Manage Users. Both scale with the button. */
.axon-icon-btn svg { width: 16px; height: 16px; }
.axon-icon-btn .bi { font-size: 16px; line-height: 1; }
.axon-icon-btn:hover { background: var(--hairline); }
.axon-icon-btn--danger { color: #C64; }
.axon-icon-btn--danger:hover { background: var(--bad-bg); }

/* ------------------------------------------------------------- badges ---- */

.axon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.axon-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.axon-badge--bare::before { display: none; }

/* Neutral fallback: templates build the modifier from data
   (`axon-badge--{{ status|lower }}`), so an unexpected status value must still
   render as a badge rather than as bare text. */
.axon-badge { background: var(--hairline); color: var(--muted); }

.axon-badge--active,   .axon-badge--ok      { background: var(--ok-bg);   color: var(--ok-fg); }
.axon-badge--inactive, .axon-badge--danger  { background: var(--bad-bg);  color: var(--bad-fg); }
.axon-badge--draft,    .axon-badge--warning { background: var(--warn-bg); color: var(--warn-fg); }

.axon-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  background: var(--accent-soft-2);
  color: var(--accent);
}
.axon-tag--bare { font-weight: 700; }
.axon-tag--editor { background: rgba(231, 90, 124, .13); color: #B33A57; }
.axon-tag--viewer { background: rgba(14, 165, 164, .12); color: #0E7C7B; }

.axon-tag--auto {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  background: var(--ok-bg);
  color: var(--ok-fg);
  border-radius: 999px;
  padding: 3px 9px;
}
/* Same pill, accent-tinted: the design uses green for AUTO (a generated value)
   and accent for RICH TEXT (the editor mode). */
.axon-tag--mode {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 9px;
}

/* --------------------------------------------------------------- fields -- */

.axon-field { display: block; }
.axon-field + .axon-field { margin-top: 16px; }

.axon-label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 7px;
  color: var(--ink);
}
.axon-label .axon-req { color: var(--accent); }
.axon-label .axon-optional { font-weight: 600; color: var(--faintest); font-size: 12px; }

/* Bare Django widgets inside a field get the control look automatically. */
.axon-field input:not([type="checkbox"]):not([type="radio"]),
.axon-field select,
.axon-field textarea,
.axon-input,
.axon-select,
.axon-textarea {
  width: 100%;
  height: 45px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  background: var(--field);
  color: var(--ink);
}
.axon-field select, .axon-select { padding: 0 12px; }
.axon-field textarea, .axon-textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}
.axon-input--locked,
.axon-field input[readonly] {
  background: var(--field-locked);
  color: var(--muted);
  font-weight: 700;
}

.axon-field-wrap { position: relative; }
.axon-field-wrap input { padding-right: 46px !important; }

.axon-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
}
.axon-password-toggle:hover { background: var(--hairline); color: var(--ink-2); }

.axon-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: none;
  margin: 0;
}

.axon-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.axon-check-count {
  margin-left: auto;
  color: var(--faintest);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.axon-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* Columns are siblings, so the stacked-field rule above would push every field
   after the first down by 16px. The grid gap already spaces them. */
.axon-field-grid > .axon-field + .axon-field { margin-top: 0; }

/* ---------------------------------------------------------------- cards -- */

.axon-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 18px;
}
.axon-card--form {
  border-radius: 22px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.axon-card--flush { padding: 0; overflow: hidden; }
.axon-card--pop { animation: axon-fade-up .4s ease both; }

.axon-form-shell { max-width: 900px; margin: 0 auto; animation: axon-fade-up .4s ease both; }
.axon-form-shell--narrow { max-width: 760px; }

/* ------------------------------------------------- category builder ------ */
/* The module form's category/subcategory editor is driven by inline JS that
   *generates* this markup, so the legacy class names are the contract. They are
   styled here, scoped to .axon-catbuilder so nothing leaks to other pages, and
   the template keeps the names the script expects. */

.axon-catbuilder { display: flex; flex-direction: column; gap: 8px; }

.axon-catbuilder .subcategory-card {
  border: 1px solid var(--hairline);
  background: var(--sand);
  border-radius: 13px;
  padding: 12px 16px;
}

.axon-catbuilder .subcategory-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
}
.axon-catbuilder .subcategory-name { font-weight: 700; font-size: 14px; color: var(--ink); }

.axon-catbuilder .btn-delete-subcategory {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--faintest);
  font-size: 15px;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
}
.axon-catbuilder .btn-delete-subcategory:hover { background: var(--bad-bg); color: #C64; }

.axon-catbuilder .subcategory-card-body { padding: 0; }

/* Toggle sits inline with the name, as in the design. */
.axon-catbuilder .detail-creation-controls { margin-top: 0; }
.axon-catbuilder .toggle-container {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 0 2px;
}
.axon-catbuilder .regular-checkbox {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}
.axon-catbuilder .toggle-label {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--faint);
  margin: 0;
}

.axon-catbuilder .detail-input-wrapper {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.axon-catbuilder .detail-input-wrapper.d-none { display: none; }
.axon-catbuilder .detail-input-field {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 0 13px;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--ink);
}
.axon-catbuilder .detail-add-btn {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  border-radius: 11px;
  height: 42px;
  padding: 0 18px;
  cursor: pointer;
  flex: none;
  font-family: var(--font);
}
.axon-catbuilder .detail-add-btn:hover { background: var(--hairline); }

/* Saved detail chips. */
.axon-catbuilder .saved-detail-display-area {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 0;
}
.axon-catbuilder .detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-soft-2);
  color: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 6px 7px 6px 13px;
  font-size: 12.5px;
  font-weight: 700;
}
.axon-catbuilder .chip-text { margin: 0; font-weight: 700; }
.axon-catbuilder .chip-remove-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(59, 130, 246, .16);
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-weight: 800;
  padding: 0;
}
.axon-catbuilder .chip-remove-btn:hover { background: var(--bad-bg); color: #C64; }

.axon-catbuilder .text-muted { color: var(--faintest) !important; font-size: 13.5px; }

.axon-divider { height: 1px; background: var(--hairline); border: 0; margin: 0; }

.axon-section-divider {
  border-top: 1px solid var(--hairline);
  margin-top: 22px;
  padding-top: 20px;
}

/* ---------------------------------------------------------------- tables -- */
/* Tables authored with the editor's Table button. Lives here rather than in
   post_create.css because the same markup has to render on the published
   article, which never loads the editor stylesheet. */
.ql-editor table,
.axon-prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
}
.ql-editor table td,
.ql-editor table th,
.axon-prose table td,
.axon-prose table th {
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 16px;
  vertical-align: top;
}
.axon-prose table th { background: var(--sand); font-weight: 700; }

/* --------------------------------------------------------------- alerts -- */

.axon-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  padding: 13px 18px;
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 13.5px;
  animation: axon-fade-up .3s ease both;
}
/* base.js clears a flash after a few seconds. This has to be an animation, not a
   transition: .axon-alert's own animation uses fill-mode `both`, so its final
   opacity/transform keep applying and would win over any transition. */
@keyframes axon-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
.axon-alert.is-hiding { animation: axon-fade-out .3s ease both; }

.axon-alert--success { background: var(--ok-bg);   border: 1px solid var(--ok-bd); color: var(--ok-fg); }
.axon-alert--error   { background: var(--bad-bg);  border: 1px solid #F0D5D3;      color: var(--bad-fg); }
.axon-alert--warning { background: var(--warn-bg); border: 1px solid #F2E0BC;      color: var(--warn-fg); }
.axon-alert--info    { background: var(--accent-soft); border: 1px solid #CBD9EE;  color: var(--accent-deep); }

/* manage.user.js sets `className = "form-notification <type>"` and toggles
   display itself, so these mirror the alert looks under its class names. */
.form-notification {
  display: none;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  padding: 13px 18px;
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 13.5px;
}
.form-notification.success { background: var(--ok-bg);   border: 1px solid var(--ok-bd); color: var(--ok-fg); }
.form-notification.error   { background: var(--bad-bg);  border: 1px solid #F0D5D3;      color: var(--bad-fg); }
.form-notification.warning { background: var(--warn-bg); border: 1px solid #F2E0BC;      color: var(--warn-fg); }

.axon-alert-dismiss {
  margin-left: auto;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 0 2px;
}

/* ==========================================================================
   Login screen
   ========================================================================== */

.axon-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: var(--dark);
  padding: 32px;
}

.axon-login-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.axon-login-glow--a {
  width: 640px;
  height: 640px;
  top: -220px;
  right: -140px;
  background: radial-gradient(circle, rgba(59, 130, 246, .4), transparent 65%);
  animation: axon-glow 7s ease-in-out infinite;
}
.axon-login-glow--b {
  width: 520px;
  height: 520px;
  bottom: -200px;
  left: -120px;
  background: radial-gradient(circle, rgba(217, 130, 95, .22), transparent 65%);
  animation: axon-glow 9s ease-in-out infinite;
}

.axon-login-card {
  position: relative;
  width: 432px;
  max-width: 94vw;
  background: rgba(255, 255, 255, .98);
  border-radius: 26px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
  padding: 40px 38px;
  animation: axon-fade-up .5s ease both;
}

/* Login card wordmark. A touch larger than the nav's — the card is the only
   thing on the page — and it carries the gap the old brand block used to. */
.axon-login-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;
  margin-bottom: 28px;
}

.axon-login-title {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -.02em;
  margin: 0;
}
.axon-login-sub { color: var(--muted); margin: 6px 0 26px; }

.axon-login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.axon-login-form .axon-field + .axon-field { margin-top: 0; }

/* Login controls sit slightly taller / rounder than the in-app form controls. */
.axon-login-form .axon-field input:not([type="checkbox"]) {
  height: 47px;
  border-radius: 13px;
  padding: 0 15px;
  font-size: 14.5px;
}
.axon-login-form .axon-field-wrap input { padding-right: 46px !important; }

.axon-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted-2);
  font-size: 13.5px;
  cursor: pointer;
}

.axon-login-btn {
  height: 49px;
  border: none;
  border-radius: 14px;
  background: var(--accent-grad);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: var(--shadow-accent);
  transition: filter .15s;
}
.axon-login-btn:hover { filter: brightness(1.07); }

.axon-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faintest);
  font-size: 12.5px;
}
.axon-login-divider::before,
.axon-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--chip-track);
}

/* ==========================================================================
   Admin shell
   ========================================================================== */

.axon-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.axon-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 242, 234, .85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.axon-topbar-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 6px var(--shell-pad);
  /* Single row on desktop: the tab strip absorbs the squeeze by scrolling
     internally. With wrap enabled a flex line breaks before its items shrink,
     which pushed the account controls onto a second row. */
  flex-wrap: nowrap;
}
.axon-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Segmented module tabs. */
.axon-tabs {
  display: flex;
  gap: 2px;
  background: var(--chip-track);
  border-radius: 13px;
  padding: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* Shrink ahead of the search box and account controls. */
  flex: 0 4 auto;
  min-width: 0;
  max-width: 100%;
  scrollbar-width: none;
}
.axon-tabs::-webkit-scrollbar { display: none; }

.axon-tab {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 11px;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.axon-tab:hover { color: var(--ink); }
.axon-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(34, 48, 44, .08);
}

.axon-searchbox {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 13px;
  height: 46px;
  padding: 0 15px;
  width: 260px;
  min-width: 130px;
  flex-shrink: 1;
}
.axon-searchbox input {
  border: none;
  background: transparent;
  font-size: 14px;
  width: 100%;
  outline: none;
  height: auto;
}
/* The global `body.axon input:focus` ring (0,2,2) outranks a plain
   `.axon-searchbox input:focus` (0,2,1), which is why the blue outline showed
   up inside the field despite the rule above. Naming the body wins the match.
   Focus is not lost: the field's own border darkens instead. */
body.axon .axon-searchbox input:focus { outline: none; }
.axon-searchbox:focus-within { border-color: var(--faint); }

/* Clear (×) button, shown only while the input holds a query. Sized like
   .axon-icon-btn but tighter, so it sits inside the 46px search field. */
.axon-searchbox-clear {
  width: 24px;
  height: 24px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}
.axon-searchbox-clear[hidden] { display: none; }
.axon-searchbox-clear:hover { background: var(--hairline); color: var(--ink); }
.axon-searchbox-clear:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

.axon-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  flex: none;
}
.axon-avatar:hover { filter: brightness(1.12); }
.axon-avatar--grad { background: var(--accent-grad); }

/* Account dropdown. */
.axon-menu-anchor { position: relative; }
.axon-menu {
  position: absolute;
  right: 0;
  top: 52px;
  width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-pop);
  padding: 8px;
  animation: axon-pop .18s ease both;
  z-index: 60;
}
/* Hidden by default; base.js reveals it by toggling `.show`. */
.axon-menu { display: none; }
.axon-menu.show { display: block; }
.axon-menu[hidden] { display: none; }
.axon-menu-head { padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.axon-menu-name { font-weight: 800; }
.axon-menu-email { font-size: 12.5px; color: var(--faint); word-break: break-all; }
.axon-menu-label {
  padding: 8px 12px 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--faintest);
}
.axon-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 11px 12px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.axon-menu-item:hover { background: var(--canvas); color: var(--ink); }
/* Read-only rows (e.g. the account's access level) must not look clickable. */
div.axon-menu-item { cursor: default; }
div.axon-menu-item:hover { background: var(--accent-soft-2); }
.axon-menu-item.is-active { background: var(--accent-soft-2); color: var(--accent); font-weight: 700; }
/* Doubled class to reach (0,2,0): the Logout link keeps `dropdown-item logout`
   because base.js binds its confirm dialog to `.dropdown-item.logout`, and
   base.css styles that pair at the same weight. Ties are broken by load order,
   and this file loads last. */
.axon-menu-item.axon-menu-item--danger { color: #D33; font-weight: 700; }
.axon-menu-item.axon-menu-item--danger:hover { background: var(--bad-bg); color: #D33; }
.axon-menu-sep { height: 1px; background: var(--hairline); margin: 6px 4px; }

/* Body: sticky sidebar + fluid main. */
.axon-body {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 26px;
  /* Bottom clearance keeps the fixed Ask AI pill off page content. */
  padding: 26px var(--shell-pad) 104px;
  width: 100%;
}
.axon-sidebar {
  width: 280px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}
.axon-main {
  flex: 1;
  /* min-width:0 alone is not enough — without max-width the column grows to the
     table's min-content width and the page scrolls sideways instead of the
     table scrolling inside its own container. */
  min-width: 0;
  max-width: 100%;
}

.axon-filter-title { font-weight: 700; font-size: 13px; margin-bottom: 9px; }
.axon-filter-group { display: flex; flex-direction: column; gap: 8px; }
.axon-filter-group + .axon-filter-title { margin-top: 16px; }

/* Sidebar-sized controls. */
.axon-select--sm,
.axon-sidebar select {
  height: 38px;
  background: var(--field);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  font-size: 13px;
  padding: 0 10px;
  color: var(--ink-2);
  width: 100%;
}

.axon-filter-actions { display: flex; gap: 8px; margin-top: 18px; }
.axon-filter-actions > * { flex: 1; height: 38px; border-radius: 11px; font-size: 12.5px; }
.axon-filter-note { color: var(--faintest); font-size: 11.5px; margin-top: 10px; }

/* Management nav. */
.axon-navcard { padding: 14px 12px; }
.axon-navcard .axon-eyebrow { margin: 4px 8px 10px; }
.axon-navlink {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 11px;
  padding: 12px 13px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--muted-2);
  font-family: var(--font);
  margin-bottom: 2px;
}
.axon-navlink:hover { background: var(--canvas); color: var(--ink); }
/* `.active` is what base.js adds by matching href to the current path. */
.axon-navlink.is-active,
.axon-navlink.active { background: var(--accent-soft-2); color: var(--accent); }

/* ==========================================================================
   Data table — CSS grid rows, horizontally scrollable
   ========================================================================== */

.axon-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.axon-table-inner { min-width: 1080px; }

/* Public-portal listing: no shadow, clipped corners, no min-width. */
.axon-table--flat {
  box-shadow: none;
  overflow: hidden;
}

.axon-thead,
.axon-row {
  display: grid;
  grid-template-columns: var(--axon-cols, 70px 130px minmax(200px, 1fr) 115px 160px 145px 100px 108px);
  padding: var(--rowpad) 22px;
}

.axon-thead {
  padding: 13px 22px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faintest);
}
.axon-th {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  font-family: var(--font);
  display: block;
  width: 100%;
}
/* Label + arrow on one line, still filling the grid cell so the whole header
   stays clickable. */
.axon-th--sortable {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.axon-th--sortable:hover { color: var(--ink); }
.axon-th--active { color: var(--ink); }
.axon-th--right { text-align: right; }

.axon-row {
  align-items: center;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 14px;
}
.axon-row:last-child { border-bottom: 0; }
.axon-row:hover { background: var(--row-hover); }

.axon-cell--id { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.axon-cell--strong { color: var(--ink-3); font-weight: 600; }
.axon-cell--muted { color: var(--faint); }
.axon-cell--date { color: var(--faint); font-variant-numeric: tabular-nums; }
.axon-cell--body { color: var(--ink-3); }
.axon-cell-title { font-weight: 700; color: var(--ink); }
.axon-cell-title:hover { color: var(--accent); }
/* A cell value that filters the listing down to itself. */
.axon-cell-filter { cursor: pointer; border-bottom: 1px dotted currentColor; }
.axon-cell-filter:hover,
.axon-cell-filter:focus-visible { color: var(--accent); }
.axon-cell--actions { display: flex; gap: 6px; justify-content: flex-end; }

/* A whole row that is itself the link (public listings). */
a.axon-row,
button.axon-row {
  width: 100%;
  text-align: left;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  color: inherit;
  padding: 16px 24px;
}
a.axon-row:hover,
button.axon-row:hover { background: var(--row-hover); color: inherit; }

/* Module name pill used in public search results. */
.axon-modchip {
  font-size: 11.5px;
  font-weight: 800;
  background: var(--hairline-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.axon-chev { color: #C2C8BD; font-size: 16px; text-align: right; }

/* Category page header: large tinted icon tile + title. */
.axon-cat-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.axon-cat-head-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  font-size: 26px;
  flex: none;
}
.axon-cat-head-icon img { width: 34px; height: 34px; object-fit: contain; }
/* Inline glyphs (layouts/_policies_icon.html) draw in currentColor, so the tile
   hands them the accent the icon-font rule below already uses. */
.axon-cat-head-icon svg { width: 34px; height: 34px; color: var(--accent); }
.axon-cat-head-icon i { color: var(--accent); }

.axon-empty {
  padding: 40px;
  text-align: center;
  color: var(--faintest);
  font-size: 14px;
}

/* Plain <table> variant, for templates not yet on the grid rows. */
.axon-table table { width: 100%; border-collapse: collapse; }
.axon-table thead th {
  text-align: left;
  padding: 13px 22px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faintest);
  white-space: nowrap;
}
.axon-table tbody td {
  padding: var(--rowpad) 22px;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 14px;
  vertical-align: middle;
}
.axon-table tbody tr:last-child td { border-bottom: 0; }
.axon-table tbody tr:hover { background: var(--row-hover); }
.axon-table thead th.axon-th--right,
.axon-table tbody td.axon-th--right { text-align: right; }

/* Sortable column headers (layouts/_sort_th_cell.html). The link inherits the
   header's own type so only the arrow marks it as interactive. */
.axon-table thead th .axon-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  cursor: pointer;
}
.axon-table thead th .axon-sort:hover { color: var(--ink-2); }
.axon-table thead th .axon-sort--active { color: var(--accent); }

/* Filled triangles, larger than the 10.5px header type and solid enough to read
   at a glance. Every header shows one — unsorted columns get the stacked pair. */
.axon-sort-arrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: .8;
  opacity: .8;
}
.axon-sort-arrow--both i {
  font-style: normal;
  font-size: 9px;
  line-height: .78;
}
.axon-sort:hover .axon-sort-arrow { opacity: 1; }
.axon-sort--active .axon-sort-arrow { opacity: 1; }

.axon-table thead th .axon-sort:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Permission matrix: narrow, centred checkbox columns. */
.axon-table thead th.axon-perm-col,
.axon-table tbody td.axon-perm-col { width: 96px; text-align: center; }

/* ------------------------------------------------------- handbook cards -- */
/* The Handbooks module is a card list, not a table: a handbook owns an ordered
   list of sections, so each card carries its own nested rows. Used only by the
   Handbooks branch of post_list.html. */

.axon-hb-list { display: flex; flex-direction: column; gap: 14px; }

.axon-hb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 24px;
  transition: border-color .15s;
}
.axon-hb-card:hover { border-color: #DCDCD6; }

.axon-hb-head { display: flex; align-items: center; gap: 14px; }

.axon-hb-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}

/* min-width:0 lets the description ellipsis instead of forcing the card wide. */
.axon-hb-main { min-width: 0; flex: 1 1 auto; }

.axon-hb-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.axon-hb-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
}
a.axon-hb-title:hover { color: var(--accent); }
.axon-hb-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--faintest);
  font-variant-numeric: tabular-nums;
}
.axon-hb-desc {
  color: var(--faint);
  font-size: 13px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.axon-hb-status { flex: none; }
.axon-hb-head > .axon-cell--actions { flex: none; }

/* Section rows sit under the title, indented past the icon tile (44 + 14). */
.axon-hb-sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding-left: 58px;
}
.axon-hb-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--sand);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.axon-hb-secno {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faintest);
  width: 76px;
  flex: none;
}
.axon-hb-sectitle {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.axon-hb-sectitle:hover { color: var(--accent); }

/* Design renders section state as a bare dot + word rather than a filled pill,
   so it stays quiet against the parent handbook's badge. */
.axon-hb-secstatus {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--faint);
  white-space: nowrap;
}
.axon-hb-secstatus::before { content: "● "; }
.axon-hb-secstatus--active { color: var(--ok-fg); }
.axon-hb-secstatus--inactive { color: var(--bad-fg); }
.axon-hb-secstatus--draft { color: var(--warn-fg); }

.axon-hb-section > .axon-cell--actions { flex: none; }

/* The pager normally sits inside .axon-table, which supplies the surface and
   rounded corners. In the card list it stands alone, so give it its own. */
.axon-hb-list > .axon-pager {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

@media (max-width: 640px) {
  .axon-hb-card { padding: 16px; border-radius: 16px; }
  .axon-hb-head { flex-wrap: wrap; }
  .axon-hb-main { flex: 1 1 100%; order: 2; }
  .axon-hb-status { order: 1; margin-left: auto; }
  .axon-hb-head > .axon-cell--actions { order: 1; }
  .axon-hb-sections { padding-left: 0; }
  .axon-hb-section { flex-wrap: wrap; gap: 8px; }
  .axon-hb-secno { width: auto; }
  .axon-hb-sectitle { flex: 1 1 100%; }
}

/* ----------------------------------------------------------- pagination -- */

.axon-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--sand);
  flex-wrap: wrap;
}
.axon-pager-label { font-size: 12.5px; color: var(--faint); font-weight: 700; }
.axon-pager-note { font-size: 12.5px; color: var(--faint); font-weight: 600; }
.axon-pager select {
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  padding: 0 8px;
  width: auto;
}
.axon-pager-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.axon-pager-nav .axon-btn--xs:hover { border-color: var(--accent); }
.axon-pager-page { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.axon-pager-nav .is-disabled { color: var(--faintest); pointer-events: none; }

/* ==========================================================================
   Article / detail view
   ========================================================================== */

/* Public article fills the content column — the gutter comes from
   .axon-pubmain, matching the design. */
.axon-article { max-width: 100%; }
.axon-article-meta { display: flex; flex-direction: column; gap: 14px; }
.axon-meta-row { display: flex; gap: 10px; font-size: 14.5px; flex-wrap: wrap; }
.axon-meta-label { font-weight: 800; flex: none; }
.axon-meta-value { color: var(--ink-3); }

.axon-prose { font-size: 16px; line-height: 1.75; color: var(--ink-3); }
.axon-prose p { margin: 0 0 14px; }
.axon-prose h1, .axon-prose h2, .axon-prose h3, .axon-prose h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 26px 0 10px;
}
.axon-prose h1 { font-size: 26px; }
.axon-prose h2 { font-size: 21px; }
.axon-prose h3 { font-size: 18px; }
.axon-prose h4 { font-size: 17px; }
.axon-prose ul, .axon-prose ol { margin: 0 0 14px; padding-left: 22px; }
.axon-prose li { margin-bottom: 6px; }
.axon-prose a { color: var(--accent); font-weight: 600; }
.axon-prose blockquote {
  margin: 0 0 14px;
  padding: 10px 18px;
  border-left: 3px solid var(--accent);
  background: var(--sand);
  border-radius: 0 12px 12px 0;
  color: var(--muted);
}
.axon-prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.axon-prose th, .axon-prose td {
  border: 1px solid var(--hairline);
  padding: 9px 12px;
  font-size: 16px;
  text-align: left;
}
.axon-prose th { background: var(--sand); font-weight: 800; }
/* Imported screenshots are full-page captures; stretched to the article's width
   they dwarf the step they illustrate. Cap them so they read as an illustration
   of the step while staying legible, and lay them out as a block so each one
   sits under its step. Plain max-width first: fallback for browsers sans min(). */
.axon-prose img {
  display: block;
  max-width: 100%;
  max-width: min(100%, 780px);
  height: auto;
  border-radius: 12px;
  margin: 9px 0 4px;
}

/* Quill stores article bodies; neutralise its editor chrome for read-only views.
   `.ql-editor` must stay on the element — quill.snow.css renders the list
   markers and base.js/detail-page JS query it. */
.axon-prose.ql-editor {
  border: none;
  padding: 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  font-family: var(--font);
}
.axon-prose.ql-editor > * { white-space: normal !important; }

.axon-attachment {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
}
.axon-reflist { display: flex; flex-direction: column; gap: 8px; }

/* External references on an article page — one link per line. */
.axon-reference-list { list-style: none; margin: 0; padding: 0; }
.axon-reference-list li { margin-bottom: 7px; }
.axon-reference-list li:last-child { margin-bottom: 0; }
.axon-reference-list a {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.axon-stamp { color: var(--faintest); font-size: 12.5px; margin-top: 20px; }
.axon-readonly-note {
  color: var(--faintest);
  font-size: 12.5px;
  margin-top: 18px;
  font-style: italic;
}

/* Handbook section strip. */
.axon-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--sand);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.axon-strip-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--faintest);
  width: 76px;
  flex: none;
  text-transform: uppercase;
}
a.axon-strip:hover { border-color: var(--accent); background: var(--surface); }
a.axon-strip:hover .axon-strip-title { color: var(--accent); }
.axon-strip-title { font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.axon-strip-status { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--ok-fg); }

/* ==========================================================================
   Public portal
   ========================================================================== */

.axon-public {
  min-height: 100vh;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
}

.axon-pubnav {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.axon-pubnav-inner {
  width: 100%;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
  flex-wrap: wrap;
}
.axon-pubnav-links {
  margin-left: auto;
  display: flex;
  gap: 32px;
  height: 100%;
  align-items: stretch;
}
.axon-pubnav-link {
  display: flex;
  align-items: center;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  padding: 0 2px;
  border-bottom: 2.5px solid transparent;
}
.axon-pubnav-link:hover { color: var(--accent); }
.axon-pubnav-link.is-active { border-bottom-color: var(--accent); }
.axon-pubnav-cta { margin-left: 32px; flex: none; }

/* Account control in the public nav: role tag beside the avatar that opens the
   account menu. The tag goes first on a narrow screen — the menu says the same
   thing on its Access level row, so nothing is lost. */
.axon-pubnav-account { display: flex; align-items: center; gap: 10px; }

/* Hero. */
.axon-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--dark);
}
.axon-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.axon-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(16, 26, 40, .9) 25%, rgba(16, 26, 40, .62) 60%, rgba(16, 26, 40, .3));
  pointer-events: none;
}
.axon-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 64px 30px 68px;
}
.axon-hero-body { max-width: 620px; }
.axon-hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #9DBCE8;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.axon-hero-title {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -.025em;
  line-height: 1.12;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
  margin: 0;
}

.axon-hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: 16px;
  height: 56px;
  padding: 0 8px 0 20px;
  margin-top: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.axon-hero-search input {
  border: none;
  outline: none;
  font-size: 15px;
  width: 100%;
  background: transparent;
  height: auto;
}
/* Same override as .axon-searchbox: the global `body.axon input:focus` ring is
   more specific than this rule alone, so the blue outline sat inside the pill.
   The pill has no border to darken, so focus shows as a ring around it —
   box-shadow rather than outline, so the 56px height does not shift. */
body.axon .axon-hero-search input:focus { outline: none; }
.axon-hero-search:focus-within {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 2px var(--border);
}

/* "Popular:" shortcut row under the hero search. Sits on the photo, so the
   pills are translucent white rather than the page's surface tokens. */
.axon-hero-popular {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.axon-hero-popular-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
}
.axon-hero-pill {
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.axon-hero-pill:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.axon-hero-search button {
  height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 0 20px;
  cursor: pointer;
  flex: none;
}
.axon-hero-search button:hover { filter: brightness(1.1); }

.axon-hero-popular {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.axon-hero-popular-label { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.axon-chip {
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  font-family: var(--font);
}
.axon-chip:hover { background: rgba(255, 255, 255, .25); color: #fff; }

.axon-pubmain { width: 100%; padding: 46px 24px 104px; }

/* Category grid. */
.axon-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.axon-cat-card {
  border: 1px solid var(--border);
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  border-radius: 20px;
  padding: 26px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Grid items default to min-width:auto, which lets a long label push the
     card wider instead of letting the label ellipsise. */
  min-width: 0;
  /* A floor, not a ceiling: short names keep the card the design's size, and a
     name long enough to wrap grows past it with the whole row. */
  min-height: 168px;
  justify-content: center;
  gap: 12px;
  font-family: var(--font);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.axon-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(34, 48, 44, .1);
  border-color: var(--accent);
}
.axon-cat-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.axon-cat-icon i { font-size: 22px; color: var(--accent); line-height: 1; }
.axon-cat-icon img { width: 30px; height: 30px; object-fit: contain; }
.axon-cat-icon svg { width: 30px; height: 30px; color: var(--accent); }

/* Collapsed the label is one clamped line, so a long name reads
   "Instructional…" — the clamp breaks at a word, never mid-word. The width cap
   is measured rather than guessed: at 17px Sora/700 "Instructional" is ~113px
   wide, so 8.2em (~139px) holds the longest first word plus its ellipsis and
   every card keeps the same label width. Being in em, the cap tracks the font
   size if that is tuned again.

   Hovering expands the same element to the full name in place — no tooltip.
   The card reserves the taller height up front (see min-height above), so the
   extra lines fill slack that is already there and nothing below moves. */
.axon-cat-label {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  font-family: var(--font-display);
  /* The name is shown in full. It used to clamp to one line — two on hover —
     which turned every longer category into "Environmenta..". A long name now
     wraps onto as many lines as it needs, and since grid items stretch, the
     rest of the row grows with it and the cards stay level. */
  max-width: 100%;
  overflow-wrap: break-word;
}
.axon-cat-card.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ------------------------------------------------------------ role cards - */

.axon-role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.axon-role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  transition: border-color .15s;
}
.axon-role-card:hover { border-color: #DCDCD6; }
.axon-role-id {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--faintest);
  font-variant-numeric: tabular-nums;
}
.axon-role-name {
  font-weight: 700;
  font-size: 17px;
  font-family: var(--font-display);
  color: var(--ink);
  margin: 8px 0 5px;
}
.axon-role-desc {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 960px) {
  .axon-role-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .axon-role-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- manage categories ------ */
/* One section per public surface (Help Center, Policy Center), each a flush
   card of rows: icon, name, blurb, Edit. Rows rather than a card grid because
   every row carries the same four things and the eye compares them down a
   column — the same reason the module list is a table.

   Each row is a <form>, and Edit unfolds an editor strip inside it: the
   description becomes a field and the icon picker appears underneath, on a
   second grid row that is only there while editing. */

.axon-catman + .axon-catman { margin-top: 18px; }
.axon-catman-item { display: block; }

.axon-catman-head {
  padding: 15px 22px;
  border-bottom: 1px solid var(--hairline);
  background: var(--sand);
}
/* .axon-eyebrow carries the look; this only undoes the <h2> browser default so
   the heading is a heading in the document without being one on the page. */
.axon-catman-title { margin: 0; font-family: var(--font); }

.axon-catman-list { list-style: none; margin: 0; padding: 0; }

.axon-catman-row {
  display: grid;
  grid-template-columns: auto minmax(140px, 200px) 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--hairline-2);
  transition: background .15s;
}
.axon-catman-row:last-child { border-bottom: 0; }
.axon-catman-row:hover { background: var(--row-hover); }

/* Smaller than the 52px public card tile — this is a list row, not a card. */
.axon-catman-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 18px;
}
/* An uploaded SVG stands in for the emoji wherever an icon is drawn, so it is
   sized per tile: .axon-cat-icon already sets 30px for the 52px public one. */
.axon-catman-icon .axon-cat-glyph { width: 22px; height: 22px; }
.axon-iconpick-face .axon-cat-glyph { width: 24px; height: 24px; object-fit: contain; }

.axon-catman-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
}

.axon-catman-descwrap { min-width: 0; }

.axon-catman-desc {
  background: var(--sand);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
/* Nothing written yet. Lighter than a description so the two never read alike,
   and italic so it is plainly the absence of one rather than a short one. */
.axon-catman-desc.is-empty { color: var(--faintest); font-style: italic; }

/* The icons to choose from, on their own line under the row while editing.
   Spanning every column lines the tiles up under the icon they replace. */
.axon-catman-editor {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--sand);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 14px;
}
.axon-catman-editor[hidden] { display: none; }

.axon-catman-input {
  width: 100%;
  background: var(--field);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
}
.axon-catman-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.axon-catman-input::placeholder { color: var(--faintest); }

/* Upload SVG…, and the sentence saying what it is for. Sized to the preview it
   stands beside so the two read as one control rather than two stacked ideas. */
.axon-catman-uploadbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 15px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  transition: border-color .15s, background .15s;
}
.axon-catman-uploadbtn:hover { background: var(--hover); border-color: var(--accent); }
/* The <input type="file"> is visually hidden, so its focus ring has to be
   drawn by the label standing in for it. */
.axon-catman-uploadbtn:focus-within {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-color: var(--accent);
}
.axon-catman-uploadhint { color: var(--faint); font-size: 12.5px; }

.axon-catman-uploaderror {
  margin: 0;
  color: var(--bad-fg);
  background: var(--bad-bg);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 12.5px;
  font-weight: 600;
}
.axon-catman-uploaderror[hidden] { display: none; }

/* Edit — and, while editing, Cancel and Done — at the end of the row. */
.axon-catman-actions { display: flex; gap: 8px; flex: none; }

@media (max-width: 860px) {
  /* Two rows: the category names itself and offers its button on the first,
     the blurb runs the full width underneath rather than shrinking to a column
     too narrow to read. Both are placed explicitly — left to auto-flow, the
     full-width blurb would push the button onto a third row of its own. */
  .axon-catman-row {
    grid-template-columns: auto 1fr auto;
    gap: 10px 14px;
    padding: 14px 18px;
  }
  .axon-catman-actions { grid-column: 3; grid-row: 1; }
  .axon-catman-descwrap { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  /* Narrower still: the buttons have no room beside the name, so they share a
     full-width row below the blurb, where a thumb can reach them. */
  .axon-catman-row { grid-template-columns: auto 1fr; }
  .axon-catman-descwrap { grid-row: 2; }
  .axon-catman-actions { grid-column: 1 / -1; grid-row: 3; }
  .axon-catman-actions .axon-btn { flex: 1; }
}

/* Icon picker. A wrapping row rather than a grid of columns: it shares its
   line with Upload SVG…, so it takes the width it needs and no more. */
.axon-iconpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.axon-iconpick-tile[hidden] { display: none; }

/* Marks where the list ends and the alternative to it begins, without putting
   the two on separate lines. */
.axon-iconpick-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  margin: 0 2px;
  flex: none;
}
.axon-iconpick-tile { display: block; cursor: pointer; margin: 0; }
.axon-iconpick-face {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 23px;
  line-height: 1;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.axon-iconpick-tile:hover .axon-iconpick-face { background: var(--hover); }
.axon-iconpick-tile input:checked + .axon-iconpick-face {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* The input is visually hidden, so the tile has to show the focus ring for it. */
.axon-iconpick-tile input:focus-visible + .axon-iconpick-face {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* Callout banner. */
.axon-callout {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 28px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.axon-callout-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-grad);
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  font-size: 18px;
}

/* -------------------------------------------------------------- footer --- */

.axon-footer {
  background: var(--dark);
  color: var(--on-dark);
  margin-top: auto;
}
.axon-footer-inner {
  width: 100%;
  padding: 46px 30px 38px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
}
.axon-footer-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
}
/* White wordmark on --dark, sized against the blurb beneath it. */
.axon-footer-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: min(260px, 70vw);
  margin-bottom: 4px;
}
.axon-footer-blurb {
  font-size: 13px;
  line-height: 1.7;
  color: var(--faint);
  margin-top: 12px;
  max-width: 320px;
}
.axon-footer-social { display: flex; gap: 9px; margin-top: 16px; }
.axon-footer-social > * {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.axon-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
}
.axon-footer-head {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.axon-footer a { color: var(--on-dark); }
.axon-footer a:hover { color: #fff; }
.axon-footer-legal {
  border-top: 1px solid var(--dark-border);
  /* Extra bottom padding clears the fixed, centred Ask AI pill. */
  padding: 18px 30px 84px;
  font-size: 12px;
  color: var(--muted);
}

/* ==========================================================================
   Legacy shell overrides
   base.css still ships the old fixed-header / dark-sidebar shell, and its
   rules are needed by templates that haven't been migrated yet. Everything
   below is scoped to .axon-shell so it only neutralises those rules on pages
   that have opted into the new design. JS hooks (.sidebar, .filter-header,
   .management-link, #applyFilterBtn …) keep their class names on purpose —
   base.js binds to them — so we restyle rather than rename.
   ========================================================================== */

.axon-shell .header-bar,
.axon-shell .main-content,
.axon-shell .sidebar {
  position: static;
  top: auto; left: auto; right: auto; bottom: auto;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  overflow: visible;
  z-index: auto;
}

/* The sidebar keeps its legacy class for base.js, but takes the card layout. */
.axon-shell .sidebar {
  width: 280px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}

.axon-shell .main-content {
  flex: 1;
  min-width: 0;
}

.axon-shell .filter-section { padding: 0; margin: 0; }
.axon-shell .filter-content { padding-top: 12px; }

.axon-shell .filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.axon-shell .filter-header h6 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.axon-shell .filter-header i {
  font-size: 10px;
  color: var(--faintest);
  transition: transform .2s;
}
.axon-shell .filter-header.collapsed i { transform: rotate(-90deg); }

.axon-shell .checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.axon-shell .checkbox-item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}
.axon-shell .checkbox-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  margin: 0;
  cursor: pointer;
  flex: none;
}
.axon-shell .checkbox-item label {
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  margin: 0;
  font-weight: 500;
}

.axon-shell .filter-buttons {
  display: flex;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.axon-shell .filter-btn {
  flex: 1;
  height: 38px;
  padding: 0 10px;
  margin: 0;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: var(--font);
}
.axon-shell .filter-btn.clear {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--ink-2);
}
.axon-shell .filter-btn.clear:hover { background: var(--hover); }
.axon-shell .filter-btn.apply {
  background: var(--ink);
  border: none;
  color: #fff;
  font-weight: 800;
}
.axon-shell .filter-btn.apply:hover { background: var(--ink-2); }

.axon-shell .management-section {
  margin: 0 !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 12px;
  color: inherit;
  font-family: var(--font);
}
.axon-shell .sidebar-title,
.axon-shell .sidebar-title-filters {
  color: var(--faintest);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding: 0;
}
.axon-shell .management-section .sidebar-title { margin: 4px 8px 10px; }

.axon-shell .management-link {
  display: block;
  width: 100%;
  border-radius: 11px;
  padding: 12px 13px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted-2);
  text-decoration: none;
  margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.axon-shell .management-link:hover { background: var(--canvas); color: var(--ink); }
.axon-shell .management-link.active {
  background: var(--accent-soft-2);
  color: var(--accent);
}

/* Mobile: sidebar becomes an off-canvas drawer. base.js toggles `.show`. */
@media (max-width: 960px) {
  .axon-shell .sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 86%;
    max-width: 320px;
    height: 100vh;
    z-index: 1050;
    overflow-y: auto;
    background: var(--canvas);
    padding: 18px;
    transition: left .3s ease;
    border-right: 1px solid var(--border);
  }
  .axon-shell .sidebar.show { left: 0; }
}

@media (min-width: 961px) {
  /* Legacy media rules push the sidebar off-screen; keep it in flow here. */
  .axon-shell .sidebar { left: auto; }
  .axon-shell .sidebar-toggle { display: none; }
}

/* ==========================================================================
   Ask AI — launcher pill + assistant panel
   ========================================================================== */

.axon-ask-pill {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 26px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(34, 48, 44, .92);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  z-index: 105;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 22px 0 16px;
  box-shadow: 0 18px 44px rgba(20, 35, 31, .4);
  font-family: var(--font);
  transition: transform .18s, background .18s;
}
.axon-ask-pill:hover {
  transform: translateX(-50%) translateY(-2px);
  background: rgba(34, 48, 44, .98);
  color: #fff;
}
.axon-ask-spark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent-grad);
  display: grid;
  place-items: center;
  font-size: 13px;
  flex: none;
}
.axon-ask-label { font-weight: 700; font-size: 14px; }
.axon-ask-hint  { color: var(--faint); font-size: 13px; }

/* ------------------------------------------------------------- panel ----- */

.axon-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 94px;
}
.axon-chat-overlay.show { display: flex; }

.axon-chat {
  position: relative;
  width: 640px;
  max-width: 94vw;
  height: 600px;
  max-height: 74vh;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(226, 224, 214, .9);
  border-radius: 28px;
  box-shadow: 0 40px 100px rgba(20, 35, 31, .35), 0 4px 16px rgba(20, 35, 31, .12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: axon-pop .3s cubic-bezier(.2, .9, .3, 1.15) both;
}
/* Ambient glow behind the header (a child would be clipped by overflow). */
.axon-chat::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(59, 130, 246, .14), transparent 70%);
  pointer-events: none;
}

.axon-chat-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 14px;
}
.axon-chat-mark {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--accent-grad);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(59, 130, 246, .35);
  flex: none;
}
.axon-chat-mark::after {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3DBB7A;
  border: 2px solid #fff;
}
.axon-chat-name {
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-display);
  color: var(--ink);
}
.axon-chat-status { font-size: 11.5px; color: var(--faint); font-weight: 600; }

.axon-chat-scope {
  margin-left: auto;
  height: 36px;
  width: auto;
  border: none;
  border-radius: 999px;
  background: var(--hairline-2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  padding: 0 14px;
  cursor: pointer;
}
.axon-chat-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--hairline-2);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  flex: none;
}
.axon-chat-close:hover { background: var(--border); color: var(--ink); }

.axon-chat-rule {
  height: 1px;
  margin: 0 22px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

.axon-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Empty state. */
.axon-chat-intro { margin: auto; text-align: center; max-width: 440px; }
.axon-chat-title {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--ink), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.axon-chat-blurb {
  color: var(--faint);
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.65;
}
.axon-chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}
.axon-chat-suggestion {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: border-color .15s, transform .15s;
}
.axon-chat-suggestion:hover { border-color: var(--accent); transform: translateX(3px); }
.axon-chat-suggestion::before { content: '→'; color: var(--accent); font-size: 13px; }

/* Message bubbles. */
.axon-msg-bot {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  animation: axon-fade-up .25s ease both;
}
.axon-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--accent-grad);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  flex: none;
  margin-top: 3px;
}
.axon-msg-bot-text {
  background: #F7F5EE;
  border: 1px solid var(--hairline);
  border-radius: 4px 18px 18px 18px;
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 82%;
  overflow-wrap: anywhere;
}
.axon-msg-bot-text a { color: var(--accent); font-weight: 700; }
.axon-msg-bot-text p:last-child { margin-bottom: 0; }

/* Related-articles block appended under an answer. */
.axon-msg-refs {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.axon-msg-refs-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3, var(--ink-2));
  margin-bottom: 8px;
}
.axon-msg-refs-module {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  margin-top: 10px;
}
.axon-msg-refs-module:first-of-type { margin-top: 0; }
.axon-msg-refs-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.axon-msg-refs-list li { margin: 3px 0; }
.axon-msg-refs-list a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.axon-msg-refs-list a:hover { text-decoration: underline; }

.axon-msg-user {
  display: flex;
  justify-content: flex-end;
  animation: axon-fade-up .25s ease both;
}
.axon-msg-user-text {
  background: var(--accent-grad);
  border-radius: 18px 4px 18px 18px;
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #fff;
  max-width: 76%;
  box-shadow: 0 6px 18px rgba(59, 130, 246, .25);
  overflow-wrap: anywhere;
}

/* Typing indicator. */
.axon-msg-typing { display: flex; gap: 4px; align-items: center; padding: 3px 0; }
.axon-msg-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faintest);
  animation: axon-typing 1.1s ease-in-out infinite;
}
.axon-msg-typing span:nth-child(2) { animation-delay: .16s; }
.axon-msg-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes axon-typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* Composer. */
.axon-chat-foot { padding: 14px 18px 18px; }
.axon-chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 5px 5px 20px;
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(20, 35, 31, .06);
  transition: border-color .15s;
}
/* Neutral focus: the accent border read as a blue ring around the input. */
.axon-chat-input-wrap:focus-within { border-color: var(--faint); }
.axon-chat-input-wrap input {
  flex: 1;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 15px;
  outline: none;
}
/* Same override as .axon-searchbox: the global `body.axon input:focus` ring
   (0,2,2) outranks a plain `.axon-chat-input-wrap input:focus` (0,2,1), which
   is why the blue outline showed inside the pill. */
body.axon .axon-chat-input-wrap input:focus { outline: none; }
.axon-chat-send {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(59, 130, 246, .35);
  transition: transform .15s;
  flex: none;
}
.axon-chat-send:hover { transform: scale(1.08); }
.axon-chat-send:disabled { opacity: .45; transform: none; cursor: not-allowed; }
.axon-chat-note {
  text-align: center;
  color: #C2C8BD;
  font-size: 11px;
  margin-top: 9px;
}

@media (max-width: 700px) {
  /* Overlay clears the shrunken pill: bottom (14) + height (36) + breathing room. */
  .axon-chat-overlay { padding: 0 0 62px; align-items: flex-end; }
  .axon-chat { width: 100%; max-width: 100%; height: 82vh; max-height: 82vh; border-radius: 22px 22px 0 0; }
  .axon-chat-scope { max-width: 130px; }

  /* Compact launcher — the full-size pill ate a third of a phone viewport. */
  .axon-ask-hint { display: none; }
  .axon-ask-pill {
    bottom: 14px;
    height: 36px;
    gap: 6px;
    padding: 0 12px 0 8px;
    box-shadow: 0 10px 26px rgba(20, 35, 31, .34);
  }
  .axon-ask-spark { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
  .axon-ask-label { font-size: 12px; }
}

/* ==========================================================================
   Reset-password modal — base.js toggles `.show` on .modal-overlay.
   Scoped to #resetPasswordModal on purpose: Bootstrap modals elsewhere (the
   article editor's "Insert embedded video" dialog) reuse .modal-content /
   .modal-header / .modal-footer, and unscoped `body.axon .modal-*` rules at
   (0,1,2) were overriding Bootstrap's own sizing on those.
   ========================================================================== */

body.axon #resetPasswordModal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(20, 35, 31, .55);
  backdrop-filter: blur(3px);
  z-index: 1002;
}
body.axon #resetPasswordModal.show { display: grid; }

body.axon #resetPasswordModal .modal-content {
  width: 430px;
  max-width: 92vw;
  background: var(--surface);
  border: 0;
  border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .4);
  padding: 30px;
  animation: axon-pop .22s ease both;
}
body.axon #resetPasswordModal .modal-header { border: 0; padding: 0; margin-bottom: 18px; }
body.axon #resetPasswordModal .modal-title {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
  margin: 0;
  color: var(--ink);
}
body.axon #resetPasswordModal .modal-body { padding: 0; }
body.axon #resetPasswordModal .modal-body .form-group + .form-group { margin-top: 14px; }
body.axon #resetPasswordModal .modal-content .form-control {
  width: 100%;
  height: 47px;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  padding: 0 15px;
  font-size: 14.5px;
  background: var(--field);
  color: var(--ink);
}
body.axon #resetPasswordModal .modal-footer {
  border: 0;
  padding: 0;
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
body.axon #resetPasswordModal .modal-footer .btn {
  height: 45px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
body.axon #resetPasswordModal .modal-footer .btn-secondary {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
}
body.axon #resetPasswordModal .modal-footer .btn-secondary:hover { background: var(--hover); }
body.axon #resetPasswordModal .modal-footer .btn-primary {
  border: none;
  background: var(--accent-grad);
  color: #fff;
  font-weight: 800;
  padding: 0 22px;
  box-shadow: 0 10px 22px rgba(59, 130, 246, .32);
}
body.axon #resetPasswordModal .modal-footer .btn-primary:hover { filter: brightness(1.07); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.axon-stack   { display: flex; flex-direction: column; gap: 16px; }
.axon-stack-8 { display: flex; flex-direction: column; gap: 8px; }
.axon-inline  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.axon-push    { margin-left: auto; }
.axon-nowrap  { white-space: nowrap; }
.axon-tnum    { font-variant-numeric: tabular-nums; }
.axon-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ responsive - */

@media (max-width: 1100px) {
  .axon-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  :root { --shell-pad: 20px; }
  .axon-topbar-inner { flex-wrap: wrap; }
  .axon-body { flex-direction: column; }
  /* Filters/management rail sits above the content on small screens, following
     the document order — no `order` override. */
  .axon-sidebar { width: 100%; position: static; }
  .axon-main { width: 100%; }
  .axon-field-grid { grid-template-columns: 1fr; }
  .axon-footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .axon-hero-title { font-size: 32px; }
}

@media (max-width: 700px) {
  .axon-topbar-inner { min-height: 64px; }
  .axon-searchbox { width: 100%; }
  .axon-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .axon-footer-inner { grid-template-columns: 1fr; }
  .axon-card--form { padding: 22px 18px; }
  .axon-login-card { padding: 32px 24px; }
  .axon-h1 { font-size: 27px; }
  .axon-hero-inner { padding: 44px 20px 48px; }
  .axon-hero-title { font-size: 27px; }
  .axon-pubmain { padding: 32px 18px 96px; }
}

@media (max-width: 700px) {
  /* Public nav stacks: brand row, then links + action. */
  .axon-pubnav-inner {
    height: auto;
    padding: 12px 18px;
    gap: 12px;
    row-gap: 10px;
  }
  .axon-pubnav-links {
    margin-left: 0;
    gap: 20px;
    width: 100%;
    order: 3;
    border-top: 1px solid var(--hairline);
    padding-top: 8px;
  }
  .axon-pubnav-link { padding-bottom: 6px; }
  .axon-pubnav-cta { margin-left: auto; }
  .axon-pubnav-role { display: none; }

  /* Callout: text block full width, action below it. */
  .axon-callout { padding: 20px 18px; }
  .axon-callout > div { flex: 1 1 100%; }
  .axon-callout .axon-btn { width: 100%; margin-left: 0; }

  /* Tables scroll inside their own card rather than stretching the page.
     A min-width keeps columns legible instead of crushing them. */
  .axon-table table { min-width: 660px; }
  .axon-table-inner { min-width: 900px; }

  /* Page headers stack their action button. */
  .axon-page-head > .axon-btn,
  .axon-page-head > .axon-push { margin-left: 0; width: 100%; }

  .axon-cat-head { gap: 12px; }
  .axon-cat-head-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 21px; }
}

@media (max-width: 430px) {
  :root { --shell-pad: 14px; }
  .axon-brand-name { font-size: 15px !important; }
  .axon-tab { font-size: 14px; padding: 9px 14px; }
  .axon-cat-grid { grid-template-columns: 1fr; }
  .axon-role-grid { grid-template-columns: 1fr; }
  .axon-h1 { font-size: 24px; }
  .axon-h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  body.axon *,
  body.axon *::before,
  body.axon *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}