.cpms-help-launcher {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 2147483000;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #7fc8ff;
  border-radius: 6px;
  background: #07131ee8;
  color: #eaf7ff;
  font: 700 14px/1 system-ui;
  letter-spacing: .08em;
  cursor: pointer;
}

/* The owner-selected raster replaces the old question-mark glyph. Constrain
   the intrinsic bitmap explicitly: otherwise its natural canvas expands the
   fixed login launcher across the form and intercepts LOGIN. */
.cpms-help-launcher__icon {
  display: block;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  pointer-events: none;
}

/* The authenticated QRA perimeter is already present in the DOM at login.
   Its scene selector used to pull HELP to the top-right and enlarge it until
   it physically covered DISPLAY at the owner's 1280x592 viewport. The public
   launcher belongs at the lower-right until the real app shell is visible. */
body:has(#appShell.hidden) #cpmsHelpLauncher {
  position: fixed !important;
  top: auto !important;
  right: 18px !important;
  bottom: 72px !important;
  left: auto !important;
  width: auto !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
  font: 700 14px/1 system-ui !important;
  letter-spacing: .08em !important;
}

body:has(#appShell.hidden) #cpmsHelpLauncher .cpms-help-launcher__icon {
  width: auto;
  height: 100%;
  max-width: none;
  max-height: none;
}

/* The public HELP launcher is a header control, never a floating button over
   the registration form. `--auth` is set by the help controller when the
   authentication view is visible. */
body:has(#appShell.hidden) #authView .auth-controls #cpmsHelpLauncher.cpms-help-launcher--auth {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  order: 0;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0;
}

body:has(#appShell.hidden) #authView .auth-controls #cpmsHelpLauncher.cpms-help-launcher--auth .cpms-help-launcher__icon {
  width: auto;
  height: 100%;
}

/* Ίδιος κανόνας με το DISPLAY, ίδια εντολή ιδιοκτήτη της 2026-09-10: μέσα σε
   μπάρα διαχείρισης το κουμπί ΕΙΝΑΙ το artwork. Το ύψος είναι το κοινό ύψος
   της μπάρας - το παλιό min-height: 48px ήταν ακριβώς η αιτία που το HELP
   έβγαινε 4px ψηλότερο από τα υπόλοιπα επτά. */
.cpms-nav-controls .cpms-help-launcher--docked,
.cpms-help-launcher--root-bar,
.cpms-help-launcher--header {
  position: static;
  z-index: auto;
  order: 81;
  margin: 0;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  /* Ακολουθεί το κοινό ύψος της μπάρας όπου υπάρχει, ώστε το HELP να μη
     βγαίνει ούτε κοντύτερο ούτε ψηλότερο από τα υπόλοιπα επτά. */
  height: var(--cpms-control-h, 44px);
  min-height: var(--cpms-control-h, 44px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cpms-nav-controls .cpms-help-launcher--docked .cpms-help-launcher__icon,
.cpms-help-launcher--root-bar .cpms-help-launcher__icon,
.cpms-help-launcher--header .cpms-help-launcher__icon {
  width: auto;
  height: 100%;
  max-width: none;
  max-height: none;
}

.cpms-nav-controls .cpms-help-launcher--docked:hover .cpms-help-launcher__icon,
.cpms-help-launcher--root-bar:hover .cpms-help-launcher__icon,
.cpms-help-launcher--header:hover .cpms-help-launcher__icon {
  filter: brightness(1.24) drop-shadow(0 0 10px rgba(223, 186, 98, 0.55));
}

/* The authenticated root owns a persistent status footer. HELP belongs to
   that chrome instead of floating over the scene/Pentagon at a guessed
   viewport coordinate. The full bilingual word remains the accessible name;
   the compact visible question mark preserves the footer's text integrity. */
.status-footer .footer-version .cpms-help-launcher--footer {
  position: static;
  z-index: auto;
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #7fc8ff;
  border-radius: 4px;
  padding: 0;
  background: #07131e;
  color: #eaf7ff;
  font: 800 20px/1 system-ui;
  white-space: nowrap;
  transform: translateY(-1px);
}

.status-footer .footer-version .cpms-help-launcher--footer:hover,
.status-footer .footer-version .cpms-help-launcher--footer:focus-visible {
  border-color: #ffe298;
  outline: 2px solid #ffe298;
  outline-offset: -3px;
}

.cpms-help-backdrop[hidden] { display: none; }
.cpms-help-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #000b;
}

.cpms-help-dialog {
  width: min(1180px, calc(calc(var(--cpms-canvas-w) * 1) - 32px));
  height: min(820px, calc(calc(var(--cpms-canvas-h) * 1) - 32px));
  overflow: hidden;
  border: 1px solid #6fbbe8;
  border-radius: 10px;
  background: #07131ef7;
  color: #eef8ff;
  box-shadow: 0 24px 80px #000c;
}

.cpms-help-card {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: 20px;
  font: 15px/1.45 system-ui;
}
.cpms-help-head,
.cpms-help-actions,
.cpms-help-lang {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cpms-help-head h2 { margin: 0; font-size: 24px; }
.cpms-help-browser {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(220px, 28%) minmax(0, 1fr);
  gap: 14px;
}

.cpms-help-topics {
  min-height: 0;
  overflow: auto;
  border: 1px solid #3b7698;
  border-radius: 6px;
  padding: 12px;
  background: #06111be8;
}

.cpms-help-topics h3 {
  margin: 0 0 6px;
  color: #86d6ff;
  font-size: 13px;
  letter-spacing: .12em;
}

.cpms-help-topics [role="list"] {
  display: grid;
  gap: 6px;
}

.cpms-help-topics button {
  min-height: 44px;
  border: 1px solid #345f78;
  border-radius: 4px;
  padding: 8px 10px;
  background: #0b2231;
  color: #edf8ff;
  font: 700 13px/1.25 system-ui;
  text-align: left;
  cursor: pointer;
}

.cpms-help-topics button:hover,
.cpms-help-topics button:focus-visible {
  border-color: #ffe298;
  outline: 2px solid #ffe298;
  outline-offset: -3px;
}

.cpms-help-topics p {
  margin: 10px 0 0;
  color: #ffc36c;
  font-size: 13px;
}

#cpmsHelpReader {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  border: 1px solid #3b7698;
  border-radius: 6px;
  padding: clamp(16px, calc(var(--cpms-canvas-w) * 0.022), 30px);
  background: #f6f1e8;
  color: #101820;
  font: 500 max(13px, 1rem)/1.6 system-ui, sans-serif;
}

#cpmsHelpReader section { max-width: 76ch; margin: 0 auto; }
#cpmsHelpReader h2 { margin: 0 0 18px; color: #082a40; font-size: 1.6em; line-height: 1.2; }
#cpmsHelpReader h3 { margin: 22px 0 8px; color: #134d68; font-size: 1.18em; }
#cpmsHelpReader p,
#cpmsHelpReader li { overflow-wrap: anywhere; }
#cpmsHelpReader .note {
  margin: 18px 0;
  border-left: 4px solid #147aa6;
  padding: 10px 14px;
  background: #dcebf2;
  color: #10222c;
}
#cpmsHelpReader .note * { color: inherit; }
#cpmsHelpReader .note__label { display: block; margin-bottom: 6px; font-weight: 800; }
#cpmsHelpReader [role="button"] { color: #075f89; text-decoration: underline; cursor: pointer; }

.cpms-help-topics button[aria-current="true"] {
  border-color: #ffe298;
  background: #17384a;
  color: #ffe298;
}

.cpms-help-actions { justify-content: flex-end; }

.cpms-help-actions a,
.cpms-help-actions button,
.cpms-help-lang button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #77c9f6;
  background: #0c2433;
  color: #fff;
  border-radius: 5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.cpms-help-lang button[aria-pressed="true"] { background: #bfeaff; color: #061019; }

@media (max-width: 0px) { /* ΚΑΜΒΑΣ 1920x1080: (max-width: 650px) -> ΑΔΡΑΝΕΣ */
  .cpms-help-dialog { overflow: auto; } .cpms-help-card { height: auto; min-height: calc(calc(var(--cpms-canvas-h) * 1) - 32px); } .cpms-help-browser { grid-template-columns: 1fr; grid-template-rows: auto minmax(460px,
  calc(var(--cpms-canvas-h) * 0.7)); } .cpms-help-topics { max-height: 220px; } .cpms-help-launcher { right: 10px; bottom: 64px; } .cpms-nav-controls .cpms-help-launcher--docked {
    width: 48px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
  }
}