/* mirrorz-docs style form controls + code blocks */
.zhelp-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.5rem;
  padding: 0.6em 0.9em;
  margin: 0.75em 0 1.2em;
  background: #f4f6fa;
  border-radius: 6px;
}

.zhelp-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;        /* label + control 不换行 */
  flex: 0 0 auto;
}

.zhelp-field-label {
  margin: 0;
  font-size: 0.95em;
  color: #444;
  white-space: nowrap;
}

.zhelp-field-control {
  margin: 0;
  width: auto;
  min-width: 4rem;
  max-width: 16rem;
}

select.zhelp-field-control { min-width: 7rem; }

/* Checkbox 开关：只留开关本体，不要把 form-control 的外框/背景渲染出来 */
.zhelp-field .form-switch.form-check {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  min-height: 0;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.zhelp-field .form-check-input {
  margin: 0;
  float: none;
}

/* Padding lives on the inner <code> (the block that actually holds the
   text). That way the first line starts at the same X as every other
   line — there is no inline <code> inside a padded <pre> to introduce
   an inline-box offset on line 1. */
pre.codeblock,
#help-content pre.codeblock {
  position: relative;
  background: #f8f9fa !important;
  border-radius: 6px !important;
  padding: 0 !important;        /* padding lives on the inner <code> */
  overflow: hidden !important;  /* clip rounded corners */
  font-family: "JetBrains Mono", "Fira Mono", "Consolas", monospace;
  margin: 0 0 1.2em 0 !important;
}

pre code,
pre.codeblock code,
#help-content pre code,
#help-content pre.codeblock code {
  display: block !important;
  padding: 0.75em 2.5em 0.75em 1em !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
  white-space: pre;
  overflow-x: auto;
}

/* The duplicated raw-source <code> is only for JS to read — never show. */
.codeblock code[data-original-code],
#help-content .codeblock code[data-original-code] { display: none !important; }

.codeblock .btn-clipboard {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #6c757d;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.95em;
  cursor: pointer;
  opacity: 1;                              /* 始终完整显示，不要半透明隐身 */
  background: #ffffff;
  color: #0A77FF;
  border-color: #e5e5e5;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.codeblock .btn-clipboard:hover,
.codeblock .btn-clipboard:focus,
.codeblock:hover .btn-clipboard {
  background: #e7f0ff;
  color: #0A77FF;
  border-color: #b5d4ff;
}

.codeblock .btn-clipboard [data-checked]     { display: none; }
.codeblock .btn-clipboard.copied             { color: #198754; background: #e6f9e6; border-color: #b7ecc6; opacity: 1; }
.codeblock .btn-clipboard.copied [data-checked] { display: inline; }
.codeblock .btn-clipboard.copied i:not([data-checked]) { display: none; }

/* Hide pre-rendered form until runtime JS is ready */
#help-content[data-helpz-not-ready] .zhelp-form input,
#help-content[data-helpz-not-ready] .zhelp-form select {
  pointer-events: none;
  opacity: 0.6;
}

/* Sticky help sidebar nav — adapt to column width instead of overflowing */
@media (min-width: 768px) {
  #help-page .row > nav {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    align-self: flex-start;
  }

  #help-nav { padding: 0.25rem; }
  #help-nav .nav-link {
    font-size: 0.95em;
    /* Keep long mirror names inside the column instead of pushing it wider. */
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.25;
  }
}

/* Narrower sidebar on large screens — shrink text a touch so it still fits. */
@media (min-width: 1200px) {
  #help-nav .nav-link { font-size: 0.9em; padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* Help landing page fallback */
.help-container {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-card {
  max-width: 420px;
  margin: 2em auto;
}

.help-title {
  color: #0A77FF;
}

/* Help content area — fill the column, no hard 900px cap */
#help-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 8px;
  font-size: 1.05em;
}

#help-content pre,
#help-content code {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 0.75em 1em;
  font-size: 1em;
  color: #212529;
  overflow-x: auto;
  font-family: "JetBrains Mono", "Fira Mono", "Consolas", monospace;
}

#help-content pre {
  margin-bottom: 1.2em;
  position: relative;
}

#help-content code {
  padding: 0.2em 0.4em;
  font-size: 0.97em;
  background: #f4f6fa;
  border-radius: 4px;
}

#help-content .z-tmpl {
  background: #f4f6fa;
  border-left: 4px solid #0A77FF;
  padding: 0.75em 1em;
  font-family: "JetBrains Mono", "Fira Mono", "Consolas", monospace;
  font-size: 1em;
  margin-bottom: 1.2em;
}

#help-content .copy-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  background: #e9ecef;
  border: none;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 0.95em;
  color: #0A77FF;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
}

#help-content .copy-btn:hover  { background: #d0e2ff; }
#help-content .copy-btn.copied { color: #198754; background: #e6f9e6; }

#help-content h1,
#help-content h2,
#help-content h3,
#help-content h4 {
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: 600;
  line-height: 1.3;
}

/* First heading/paragraph: no extra top margin (avoid blank gap at top) */
#help-content > :first-child,
#help-content > h1:first-of-type {
  margin-top: 0;
}

#help-content h1 {
  font-size: 2em;
  border: 0 !important;   /* no top/right/bottom/left rule around the title */
  padding: 0;
  background: transparent;
}

#help-content th {
  background: #f4f6fa;
  font-weight: 600;
}

/* Table of contents */
#help-toc,
.help-toc {
  margin-bottom: 2em;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 1em 1.5em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  font-size: 1em;
}

#help-toc ul,
.help-toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#help-toc li,
.help-toc li {
  margin-bottom: 0.3em;
}

#help-toc a,
.help-toc a {
  color: #0A77FF;
  text-decoration: none;
  transition: color 0.2s;
  font-weight: 500;
}

#help-toc a.active,
.help-toc a.active {
  color: #198754;
  font-weight: 700;
}

#help-toc ul ul,
.help-toc ul ul {
  margin-left: 1.2em;
  border-left: 2px solid #e5e5e5;
  padding-left: 0.8em;
}

/* Syntax highlighting (rouge / codehilite) */
.codehilite,
.highlight {
  background: #f8f9fa !important;
  border-radius: 6px;
  padding: 0.75em 1em;
  overflow-x: auto;
  font-family: "JetBrains Mono", "Fira Mono", "Consolas", monospace;
  font-size: 1em;
}

.highlight .c  { color: #999988; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k  { color: #0A77FF; font-weight: bold; }
.highlight .o  { color: #333; }
.highlight .cm { color: #999988; font-style: italic; }
.highlight .cp { color: #999999; font-weight: bold; }
.highlight .c1 { color: #999988; font-style: italic; }
.highlight .cs { color: #999999; font-weight: bold; }
.highlight .gd { color: #A00000; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #FF0000; }
.highlight .gh { color: #000080; font-weight: bold; }
.highlight .gi { color: #00A000; }
.highlight .go { color: #888888; }
.highlight .gp { color: #555555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #800080; font-weight: bold; }
.highlight .gt { color: #0044DD; }
.highlight .kc { color: #0A77FF; font-weight: bold; }
.highlight .kd { color: #0A77FF; font-weight: bold; }
.highlight .kn { color: #0A77FF; font-weight: bold; }
.highlight .kp { color: #0A77FF; }
.highlight .kr { color: #0A77FF; font-weight: bold; }
.highlight .kt { color: #198754; }
.highlight .m  { color: #098658; }
.highlight .s  { color: #d14; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #198754; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .nd { color: #0A77FF; font-weight: bold; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #990000; font-weight: bold; }
.highlight .nf { color: #198754; }
.highlight .nl { color: #0A77FF; font-weight: bold; }
.highlight .nn { color: #555555; }
.highlight .nt { color: #0A77FF; }
.highlight .nv { color: #008080; }
.highlight .ow { color: #0A77FF; font-weight: bold; }
.highlight .w  { color: #bbbbbb; }
.highlight .mf { color: #098658; }
.highlight .mh { color: #098658; }
.highlight .mi { color: #098658; }
.highlight .mo { color: #098658; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #098658; }

/* ---------- Dark mode (aligned with www.ha.edu.cn palette) ---------- */
@media (prefers-color-scheme: dark) {
  #help-content {
    background: #2C3444 !important;
    color: var(--text-primary);
  }

  #help-content pre,
  .codehilite,
  .highlight {
    background: #1a1d24 !important;
    color: var(--text-primary);
  }

  #help-content code {
    background: #374155;
    color: #e0e4ec;
  }

  /* pre 内 code 保持透明，避免双重背景色 */
  .codeblock code,
  #help-content pre code,
  #help-content pre.codeblock code {
    background: transparent !important;
    color: var(--text-primary) !important;
  }

  #help-content .z-tmpl {
    background: #1a1d24;
    border-left-color: var(--primary-color);
    color: var(--text-primary);
  }

  #help-content h1,
  #help-content h2,
  #help-content h3,
  #help-content h4 { color: var(--text-primary); }

  #help-content p,
  #help-content li,
  #help-content td { color: var(--text-primary); }

  #help-content th {
    background: #374155;
    color: var(--text-primary);
    border-color: #3a4154;
  }
  #help-content td,
  #help-content th { border-color: #3a4154; }

  /* The zhelp-form bar: only the toggles/selects render — no border on the
     form-control wrapper around the switch, no black pill behind the input. */
  .zhelp-form { background: #374155; border: 0; }

  .zhelp-field-label { color: #c9ced6; }

  .zhelp-field .form-switch.form-check,
  .zhelp-field-control.form-switch,
  .zhelp-field-control.form-switch.form-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .zhelp-field-control.form-select,
  .zhelp-field-control.form-control:not(.form-switch):not(.form-check) {
    background-color: #1a1d24;
    color: var(--text-primary);
    border-color: #3a4154;
  }

  /* Bare checkbox switch: dim track when off, blue track when on. */
  .zhelp-field .form-check-input {
    background-color: #1a1d24;
    border-color: #4a5568;
  }
  .zhelp-field .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  .zhelp-field .form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(67, 126, 247, 0.25);
    border-color: var(--primary-color);
  }

  pre.codeblock,
  #help-content pre.codeblock,
  .codeblock {
    background: #1a1d24 !important;
    color: var(--text-primary) !important;
  }

  .codeblock .btn-clipboard {
    background: #2C3444;
    color: var(--primary-color);
    border-color: #3a4154;
  }
  .codeblock .btn-clipboard:hover,
  .codeblock .btn-clipboard:focus,
  .codeblock:hover .btn-clipboard {
    background: #374155;
    color: var(--primary-hover);
    border-color: #4a5568;
  }
  .codeblock .btn-clipboard.copied {
    background: #17361f;
    color: #6fd38a;
    border-color: #2a4a30;
  }

  .help-title { color: var(--primary-color); }

  /* Help sidebar nav (desktop) */
  #help-nav.bg-white,
  #help-nav { background: #2C3444 !important; }
  #help-nav .nav-link { color: var(--text-secondary); }
  #help-nav .nav-link:hover {
    background: rgba(67, 126, 247, 0.12);
    color: var(--text-primary);
  }
  #help-nav .nav-link.active {
    background: rgba(67, 126, 247, 0.22);
    color: #fff;
  }

  /* TOC */
  #help-toc,
  .help-toc {
    background: #374155;
    color: var(--text-primary);
  }
  #help-toc a,
  .help-toc a { color: var(--primary-color); }
  #help-toc a.active,
  .help-toc a.active { color: #6fd38a; }
  #help-toc ul ul,
  .help-toc ul ul { border-left-color: #3a4154; }

  /* Rouge / codehilite — readable palette */
  .highlight .c,
  .highlight .c1,
  .highlight .cm  { color: #8a9bab; }
  .highlight .k,
  .highlight .kc,
  .highlight .kd,
  .highlight .kn,
  .highlight .kp,
  .highlight .kr  { color: #ff7b72; }
  .highlight .kt  { color: #6fd38a; }
  .highlight .s,
  .highlight .s1,
  .highlight .s2,
  .highlight .sb,
  .highlight .sc,
  .highlight .sd,
  .highlight .se,
  .highlight .sh,
  .highlight .si,
  .highlight .sx  { color: #a5d6ff; }
  .highlight .m,
  .highlight .mi,
  .highlight .mf,
  .highlight .mh,
  .highlight .mo,
  .highlight .il  { color: #79c0ff; }
  .highlight .nb  { color: #79c0ff; }
  .highlight .nc  { color: #6fd38a; }
  .highlight .nf  { color: #d2a8ff; }
  .highlight .nt  { color: #7ee787; }
  .highlight .o   { color: var(--text-primary); }
  .highlight .err { color: #ff8188; background: transparent; }
}

/* Mobile */
@media (max-width: 768px) {
  #help-content {
    padding: 0.5em 0.2em;
    font-size: 0.98em;
  }

  #help-toc,
  .help-toc {
    padding: 0.7em 0.5em;
    font-size: 0.98em;
  }

  .form-select,
  .form-inline {
    min-height: 44px;
    font-size: 1.1em;
    margin-bottom: 1em;
  }
}