/**
 * Help Center & Exit Survey Styles
 * ============================================
 */

/* ============================================
   HELP CENTER MODAL
   ============================================ */

.help-center-modal .modal-content {
  max-width: 1020px;
  width: 96%;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.help-center-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Close button pinned to the top-right corner, floating over the header.
   Without this the .modal-close renders as a stray 32px circle in normal
   flow at the top-LEFT, pushing the header down. The base circle
   shape/size comes from the canonical .modal-close floor in style.css;
   this block only positions it and adds a scrim so the X reads cleanly
   over the tinted header. */
.help-center-content .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #64748b);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.help-center-content .modal-close:hover {
  background: #ffffff;
  color: var(--text-primary, #1e293b);
  transform: scale(1.05);
}

.help-center-body {
  overflow-y: auto;
  flex: 1;
  /* Needed so a flex child that scrolls (the two-pane layout) can actually
     shrink below its content height instead of forcing this container to grow. */
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* When the two-pane layout is present, the rail and pane own the scrolling —
   this container must not add a second scrollbar around them. The header stays
   fixed above, so search is always reachable. Search results have no panes, so
   they keep scrolling here as before. */
.help-center-body:has(.help-layout) {
  overflow-y: hidden;
}

/* Header */
.help-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
}

/* Keep the title row clear of the absolutely-positioned close button
   (top:16px right:16px, 32px wide) while letting the search bar below it
   still span the full header width. */
.help-header h2,
.help-header > p {
  padding-right: 40px;
}

.help-header h2 {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  color: var(--text-primary, #1e293b);
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-header h2 i {
  color: var(--primary-color, #14b8a6);
}

.help-header > p {
  margin: 0 0 20px 0;
  color: var(--text-secondary, #64748b);
}

/* Search */
.help-search {
  position: relative;
  display: flex;
  align-items: center;
}

.help-search i {
  position: absolute;
  left: 14px;
  color: var(--text-muted, #9ca3af);
  pointer-events: none;
}

.help-search input {
  width: 100%;
  padding: 12px 40px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #1e293b);
}

.help-search input:focus {
  outline: none;
  border-color: var(--primary-color, #14b8a6);
  box-shadow: var(--focus-ring-shadow);
}

.help-search-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
}

.help-search-clear:hover {
  background: var(--slate-100, #f1f5f9);
  color: var(--text-secondary, #64748b);
}

/* Content */
.help-content {
  padding: 24px;
}

/* ── Two-pane layout (2026-08-06 restructure) ──────────────────────────────
   Help used to be ONE column: Learn, the key, 51 FAQ items across 9
   categories, shortcuts, contact — all peers. Finding your question meant
   scrolling past every other question.

   Now a rail picks one section and the pane shows only that. The rail and the
   pane scroll INDEPENDENTLY (each owns its overflow) so the nav stays put
   while a long section scrolls — the thing a single column cannot do.

   Note .help-center-body is the scroll container in the search/mobile case;
   here it must NOT scroll, or we get a scrollbar inside a scrollbar. */
.help-layout {
  display: grid;
  grid-template-columns: 216px 1fr;
  align-items: stretch;
  min-height: 0;
  flex: 1;
}

.help-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px 16px 16px;
  border-right: 1px solid var(--border-color, #e2e8f0);
  overflow-y: auto;
  min-height: 0;
}

.help-rail-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-size: 13.5px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.help-rail-btn > i {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 12.5px;
  opacity: 0.8;
}
.help-rail-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.help-rail-btn:hover {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-primary, #1e293b);
}
.help-rail-btn.is-active {
  background: color-mix(in srgb, var(--primary-color, #14b8a6) 12%, transparent);
  color: var(--primary-color, #14b8a6);
  font-weight: 600;
}
.help-rail-btn.is-active > i { opacity: 1; }
.help-rail-btn:focus-visible {
  outline: 2px solid var(--primary-color, #14b8a6);
  outline-offset: -2px;
}

.help-pane {
  padding: 20px 24px 28px;
  overflow-y: auto;
  min-height: 0;
}
/* The pane takes focus on section change (so keyboard and screen-reader users
   land in the new content), but it is a scroll container, not a control —
   never paint a focus ring on it. */
.help-pane:focus { outline: none; }

.help-pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 12px;
  color: var(--text-primary, #1e293b);
}
/* A second title in the same pane (Learn, then Common questions) needs air
   above it; the first must stay flush with the pane's own padding. */
.help-pane-title:not(:first-child) { margin-top: 26px; }

.help-pane-lead {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary, #64748b);
}

/* Result count — confirms search ran and how much it found, so an empty-looking
   scroll is never ambiguous. */
.help-results-count {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-secondary, #64748b);
}

/* "Common questions" jump links on the landing pane. */
.help-popular {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.help-popular-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1e293b);
  font-size: 13.5px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.help-popular-btn > i:first-child {
  width: 16px;
  text-align: center;
  color: var(--primary-color, #14b8a6);
  flex-shrink: 0;
}
.help-popular-btn > span { flex: 1; min-width: 0; }
.help-popular-chevron {
  font-size: 11px;
  opacity: 0.45;
  flex-shrink: 0;
}
.help-popular-btn:hover {
  border-color: var(--primary-color, #14b8a6);
  background: var(--bg-hover, #f8fafc);
}

body.dark-mode .help-rail { border-right-color: var(--slate-700, #334155); }
body.dark-mode .help-rail-btn:hover { background: rgba(255, 255, 255, 0.06); }
body.dark-mode .help-popular-btn {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--slate-700, #334155);
  color: #e2e8f0;
}
body.dark-mode .help-popular-btn:hover { border-color: var(--primary-color, #14b8a6); }
body.dark-mode .help-pane-title { color: #f1f5f9; }

/* Under 720px the rail becomes a horizontal chip strip above the pane — the
   same pattern the Review Center uses, so this is not a new idiom to learn.
   The strip scrolls sideways rather than wrapping to three rows and eating the
   pane's height on a phone. */
@media (max-width: 720px) {
  .help-layout {
    display: flex;
    flex-direction: column;
  }
  .help-rail {
    flex-direction: row;
    gap: 6px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 0 auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .help-rail::-webkit-scrollbar { display: none; }
  .help-rail-btn {
    width: auto;
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    font-size: 13px;
  }
  .help-rail-btn.is-active { border-color: var(--primary-color, #14b8a6); }
  .help-pane { padding: 16px 16px 24px; }
  body.dark-mode .help-rail { border-bottom-color: var(--slate-700, #334155); }
  body.dark-mode .help-rail-btn { border-color: var(--slate-700, #334155); }
}

/* "Learn the app" launchers (2026-07-15 education-surfaces audit): Help is now
   the one destination that also launches Tour / Practice / Setup / Reset tips. */
.help-learn-section {
  margin-bottom: 28px;
}
.help-learn-section > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 12px;
}
.help-learn-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.help-learn-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface-primary, #fff);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.help-learn-btn:hover {
  background: var(--slate-50, #f8fafc);
  border-color: var(--primary-500, #14b8a6);
}
.help-learn-btn i {
  font-size: 18px;
  color: var(--primary-500, #14b8a6);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
/* The label stack. Scoped to :not(.help-learn-badge) so the trailing badge
   below is NOT turned into a flex column (it's a single-word pill). */
.help-learn-btn span:not(.help-learn-badge) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.help-learn-btn small {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
}

/* "Show me how" is the richest learning surface and the one we most want a new
   user to click, so it carries the Hands-on badge the ⋮ menu used to show
   (2026-07-29 consolidation — the menu row was deleted, this inherits its
   emphasis). Teal-tinted border rather than a pulse: the menu's animation
   existed to catch the eye in a long list of rows, but here there are only
   three cards and a static accent reads calmer. */
.help-learn-btn--featured {
  border-color: var(--primary-500, #14b8a6);
  background: rgba(20, 184, 166, 0.04);
}
.help-learn-badge {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--primary-700, #0f766e);
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
}
body.dark-mode .help-learn-btn--featured {
  background: rgba(20, 184, 166, 0.08);
}
body.dark-mode .help-learn-badge {
  color: var(--primary-200, #99f6e4);
  background: rgba(20, 184, 166, 0.14);
  border-color: rgba(20, 184, 166, 0.32);
}

/* FAQ Section */
.help-faq {
  margin-bottom: 32px;
}

.faq-category {
  margin-bottom: 24px;
}

.faq-category h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
}

.faq-item summary {
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  list-style: none;
  transition: background 0.15s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  background: var(--bg-hover, #f9fafb);
}

.faq-item summary i {
  color: var(--text-muted, #9ca3af);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 12px;
}

.faq-item[open] summary i {
  transform: rotate(180deg);
}

.faq-item[open] summary {
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.faq-answer {
  padding: 16px;
  color: var(--text-secondary, #4b5563);
  line-height: 1.6;
  font-size: 0.9375rem;
  background: var(--bg-secondary, #f9fafb);
}

.faq-answer strong {
  color: var(--text-primary, #1e293b);
}

.status-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 4px;
}

.status-legend-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.45;
}

.status-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  transform: translateY(2px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------------------------
   EVENT TYPES KEY (2026-07-27)
   A reference list of every event category, each shown as a REAL EventChip
   (size 'row') mounted by help-center.js so the swatch can never drift from
   what the board renders. Two columns on desktop; the chip column is fixed
   so the descriptions align into a readable text block.
   --------------------------------------------------------------------------- */
.help-event-types {
  margin-bottom: 28px;
}
.help-event-types > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 6px;
}
.help-event-types-intro {
  margin: 0 0 14px;
  color: var(--text-secondary, #64748b);
  font-size: 13px;
  line-height: 1.5;
}
.event-type-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.event-type-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface-primary, #fff);
}
/* The mounted chip is reference art: kill the interactive affordances the
   board version carries so it does not read as a button. */
.event-type-chip .event-chip {
  cursor: default;
  width: 100%;
}
.event-type-chip .event-chip:hover {
  transform: none;
  box-shadow: none;
}
.event-type-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.event-type-copy strong {
  font-size: 13px;
  color: var(--text-primary, #0f172a);
}
.event-type-copy span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary, #64748b);
}
.help-event-types-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-md, 8px);
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary, #64748b);
}

/* Stack on narrow screens — a 180px chip column plus prose is too tight on
   mobile, and the chip is the thing that must stay legible. */
@media (max-width: 640px) {
  .event-type-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

body.dark-mode .event-type-row {
  background: var(--surface-primary, #1e293b);
  border-color: var(--slate-700, #334155);
}
body.dark-mode .help-event-types-note {
  background: rgba(148, 163, 184, 0.08);
  border-color: var(--slate-700, #334155);
}

/* No Results */
.help-no-results {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary, #64748b);
}

.help-no-results i {
  font-size: 2.5rem;
  color: var(--text-muted, #d1d5db);
  margin-bottom: 16px;
}

.help-no-results p {
  margin: 0 0 20px 0;
}

/* Shortcuts Section */
.help-shortcuts {
  margin-bottom: 32px;
  padding: 20px;
  background: var(--bg-secondary, #f8fafc);
  border-radius: 12px;
}

.help-shortcuts h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  color: var(--text-primary, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
}

.shortcuts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-primary, #ffffff);
  border-radius: 6px;
  font-size: 0.875rem;
}

.shortcut-keys {
  display: flex;
  gap: 4px;
}

.shortcut-keys kbd {
  display: inline-block;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 0.75rem;
  background: var(--slate-200, #e2e8f0);
  border-radius: 4px;
  color: var(--text-primary, #1e293b);
}

.shortcut-action {
  color: var(--text-secondary, #64748b);
}

/* Contact Section */
.help-contact {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.05) 0%, rgba(20, 184, 166, 0.1) 100%);
  border-radius: 12px;
}

.help-contact h3 {
  margin: 0 0 8px 0;
  color: var(--text-primary, #1e293b);
}

.help-contact > p {
  margin: 0 0 20px 0;
  color: var(--text-secondary, #64748b);
}

.contact-options {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-options .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* ============================================
   EXIT SURVEY MODAL
   ============================================ */

.exit-survey-modal .modal-content {
  max-width: 500px;
}

.exit-survey-content {
  position: relative;
}

.exit-survey-header {
  text-align: center;
  padding: 32px 24px 24px;
}

.exit-survey-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--primary-color, #14b8a6), #0d9488);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-survey-icon i {
  font-size: 1.75rem;
  color: #ffffff;
}

.exit-survey-header h2 {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  color: var(--text-primary, #1e293b);
}

.exit-survey-header p {
  margin: 0;
  color: var(--text-secondary, #64748b);
}

/* Survey Body */
.exit-survey-body {
  padding: 0 24px 24px;
}

.survey-step h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  color: var(--text-primary, #1e293b);
}

.survey-step.hidden {
  display: none;
}

/* Reason Selection */
.reason-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reason-option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.reason-option:hover {
  background: var(--bg-hover, #f9fafb);
  border-color: var(--slate-300, #cbd5e1);
}

.reason-option.selected {
  background: rgba(20, 184, 166, 0.05);
  border-color: var(--primary-color, #14b8a6);
}

.reason-option input {
  margin-right: 12px;
  accent-color: var(--primary-color, #14b8a6);
}

.reason-label {
  color: var(--text-primary, #1e293b);
}

/* Text Area */
#exit-survey-details {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9375rem;
  resize: vertical;
  min-height: 100px;
  color: var(--text-primary, #1e293b);
  background: var(--bg-primary, #ffffff);
}

#exit-survey-details:focus {
  outline: none;
  border-color: var(--primary-color, #14b8a6);
  box-shadow: var(--focus-ring-shadow);
}

/* Thank You */
.survey-thank-you {
  text-align: center;
  padding: 24px;
}

.survey-thank-you i {
  font-size: 3rem;
  color: #ef4444;
  margin-bottom: 16px;
  animation: heartbeat 1s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.survey-thank-you h3 {
  margin: 0 0 8px 0;
  color: var(--text-primary, #1e293b);
}

.survey-thank-you p {
  margin: 0;
  color: var(--text-secondary, #64748b);
}

/* Footer */
.exit-survey-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
}

.exit-survey-footer.hidden {
  display: none;
}

/* Retention Offer */
.exit-survey-offer {
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding: 20px 24px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.exit-survey-offer.hidden {
  display: none;
}

.offer-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.offer-content > i {
  font-size: 2rem;
  color: #d97706;
}

.offer-text {
  flex: 1;
}

.offer-text strong {
  display: block;
  color: #92400e;
  margin-bottom: 2px;
}

.offer-text span {
  font-size: 0.875rem;
  color: #a16207;
}

.btn-success {
  background: #16a34a;
  color: #ffffff;
  border: none;
  white-space: nowrap;
}

.btn-success:hover {
  background: #15803d;
}


/* ============================================
   DARK MODE
   ============================================ */

.dark-mode .help-center-modal .modal-content,
.dark-mode .exit-survey-modal .modal-content {
  background: var(--surface-secondary, #1e293b);
}

.dark-mode .help-header,
.dark-mode .exit-survey-footer {
  background: var(--bg-secondary, #111827);
  border-color: var(--border-color, #374151);
}

.dark-mode .help-center-content .modal-close {
  background: rgba(31, 41, 55, 0.85);
  border-color: var(--border-color, #374151);
  color: var(--text-secondary, #9ca3af);
}

.dark-mode .help-center-content .modal-close:hover {
  background: #1f2937;
  color: var(--text-primary, #f3f4f6);
}

.dark-mode .faq-item {
  border-color: var(--border-color, #374151);
}

.dark-mode .faq-answer {
  background: var(--bg-secondary, #111827);
}

.dark-mode .help-shortcuts {
  background: var(--bg-secondary, #111827);
}

.dark-mode .shortcut-item {
  background: var(--bg-tertiary, #374151);
}

.dark-mode .shortcut-keys kbd {
  background: var(--slate-600, #475569);
}

.dark-mode .reason-option {
  border-color: var(--border-color, #374151);
}

.dark-mode .reason-option:hover {
  background: var(--bg-hover, #374151);
}

.dark-mode #exit-survey-details {
  background: var(--bg-secondary, #111827);
  border-color: var(--border-color, #374151);
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
  .help-center-modal .modal-content {
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  /* On mobile the close button grows to the 44px tap-target floor, so the
     title row needs a wider reserve to stay clear of it. */
  .help-header h2,
  .help-header > p {
    padding-right: 52px;
  }

  .shortcuts-list {
    grid-template-columns: 1fr;
  }

  .contact-options {
    flex-direction: column;
  }

  .contact-options .btn {
    width: 100%;
    justify-content: center;
  }

  .offer-content {
    flex-direction: column;
    text-align: center;
  }
}

/* Scanner drill modal styles REMOVED 2026-07-27 (education-system
   consolidation) along with the fake InteractiveDiagrams sandbox they hosted.
   Practice mode teaches move-vs-resize on the real scanner instead. */

/* ============================================
   THE KEY (2026-07-27 education-system consolidation)
   ============================================
   The reference half of Help: event blocks, shading, terminology. Three
   collapsed <details> so the section is scannable and never buries the FAQ.
   Swatches are wider than the status-legend's 14px squares because several
   samples are gradients or stripes that need room to read. */
.help-key-section {
  margin-bottom: 28px;
}
.help-key-section > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 12px;
}
.help-key-block {
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--bg-secondary, #f8fafc);
  overflow: hidden;
}
.help-key-block > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.help-key-block > summary::-webkit-details-marker { display: none; }
.help-key-block > summary::after {
  content: '\f078'; /* chevron-down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  font-size: 11px;
  opacity: 0.55;
  transition: transform 0.2s ease;
}
.help-key-block[open] > summary::after { transform: rotate(180deg); }
.help-key-block > summary:hover { background: var(--bg-hover, #f1f5f9); }
.help-key-body {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

/* ── Inline visual inside an FAQ answer (2026-08-06) ────────────────────────
   Answers that describe something the app DRAWS now show the real legend
   under the prose, using the same live renderers as "The key". That section
   is hidden while searching, so without this the picture vanished at exactly
   the moment a user searched for it.

   Set apart from the answer text with a tinted panel rather than a heading:
   it is a figure, not a new topic, and an extra heading level inside an
   accordion answer reads as a second question. */
.faq-answer-visual {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  background: var(--slate-50, #f8fafc);
}
/* The legends set their own top margin on the first child; drop it so the
   panel's padding is the only gap. */
.faq-answer-visual > *:first-child { margin-top: 0; }
.faq-answer-visual > *:last-child { margin-bottom: 0; }
body.dark-mode .faq-answer-visual {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}
.help-key-lead {
  margin: 12px 0 14px;
  line-height: 1.5;
  font-size: 13.5px;
}
.help-key-sub {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #64748b);
  margin: 18px 0 8px;
}
.help-key-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.help-key-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.45;
  font-size: 13.5px;
}
/* A colour SCALE gets its own row (2026-08-05): text first, then a full-width
   labelled strip beneath. Cramming three hard stops into the 40px swatch left
   ~13px per colour — unreadable, and it looked like a rendering fault rather
   than an illustration. */
.help-key-row--strip {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.help-key-scale {
  display: flex;
  width: 100%;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.help-key-band {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #fff;
  /* The status hues are mid-tone; a shadow keeps the caption legible on all
     three without per-band colour overrides. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
}
.help-key-swatch {
  display: inline-block;
  width: 40px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.help-key-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--teal-500, #14b8a6);
  background: var(--bg-primary, #fff);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.5;
}
/* ── Owner vs teammate (2026-08-06) ────────────────────────────────────────
   The same event rendered twice, side by side. "I set it to Shared but they
   only see Busy" is a question about two renderings of ONE event, so showing
   both at once answers it in a way prose has to describe twice. Real
   EventChips (mountVisibilityChips), so the redaction shown is the redaction
   the app performs. */
.help-vis-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 12px 0 0;
}
.help-vis-compare-col > h5 {
  margin: 0 0 6px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #64748b);
}
.help-vis-compare-col > p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary, #64748b);
}
/* The chip is reference art here, so it must not stretch to the column width
   the way it would inside a real day cell. */
.help-vis-chip .event-chip {
  cursor: default;
  max-width: 100%;
}
/* One channel per swatch. The types key strips data-visibility in JS so its
   chips show only the CATEGORY colour; this pair teaches VISIBILITY, so the
   category bar is suppressed here instead. Two coloured edges on one sample
   read as two competing type colours, not as two independent channels — the
   mistake that made "Annual leave" look self-contradictory (2026-08-06). */
.help-vis-chip .event-chip .event-chip-bar { display: none; }
@media (max-width: 600px) {
  .help-vis-compare { grid-template-columns: 1fr; gap: 16px; }
}

/* Terminology list */
.help-terms {
  margin: 12px 0 0;
}
.help-term {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.help-term:last-child { border-bottom: none; }
.help-term > dt {
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 3px;
}
.help-term > dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary, #475569);
}

body.dark-mode .help-key-block {
  border-color: var(--slate-700, #334155);
  background: rgba(255, 255, 255, 0.03);
}
body.dark-mode .help-key-body { border-top-color: var(--slate-700, #334155); }
body.dark-mode .help-key-block > summary:hover { background: rgba(255, 255, 255, 0.05); }
body.dark-mode .help-key-note { background: rgba(255, 255, 255, 0.04); }
body.dark-mode .help-term { border-bottom-color: var(--slate-700, #334155); }
body.dark-mode .help-term > dd { color: #cbd5e1; }

@media (max-width: 600px) {
  .help-key-swatch { width: 32px; }
  .help-key-body { padding: 4px 12px 14px; }
}