/* In-app help layer (Amendment A1): tooltip bubble, guide panel, "?" button.
   Colours come only from the theme variables in themes.css, so all four Console themes
   are covered by this one file and no hex literal can drift from the palette. */

.mc-tip {
  position: fixed;
  z-index: 120;                      /* above .modal-back (90) so tips work inside modals */
  max-width: 280px;
  padding: 8px 10px;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;              /* never blocks the control it describes */
  text-wrap: pretty;                 /* no orphaned last word */
}
.mc-tip[hidden] { display: none; }

.help-btn {
  font-weight: 700;
  min-width: 30px;
}

.help-panel h2 { margin: 0 0 8px; }
.help-panel h3 { margin: 20px 0 6px; font-size: 15px; }
.help-panel h4 { margin: 0 0 8px; font-size: 14px; }
.help-panel p { margin: 0 0 10px; color: var(--text-dim); text-wrap: pretty; }

.help-tips {
  margin: 0 0 6px;
  padding-left: 20px;
  color: var(--text-dim);
}
.help-tips li { margin-bottom: 6px; text-wrap: pretty; }

.help-gloss {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.help-gloss dl {
  display: grid;
  grid-template-columns: minmax(90px, max-content) 1fr;   /* stays balanced as text grows */
  gap: 4px 14px;
  margin: 0;
  font-size: 13px;
}
.help-gloss dt { font-weight: 600; color: var(--text); }
.help-gloss dd { margin: 0; color: var(--text-dim); }

.help-foot { margin-top: 16px; font-size: 12px; }

.help-actions { justify-content: flex-end; margin-top: 14px; }

/* One column below the phone breakpoint so the glossary never squeezes to one word per line. */
@media (max-width: 520px) {
  .help-gloss dl { grid-template-columns: 1fr; }
  .help-gloss dd { margin-bottom: 8px; }
  .mc-tip { max-width: calc(100vw - 24px); }
}