/**
 * Help Center (help, key & tours) + Exit Survey styles
 * ============================================
 * 2026-10-08 refit (approved mock claude.ai/artifact/Y9giWxjwt4ViV8iRqtAE5o):
 * the app's modal header with search beside it, a rail on desktop, a list you
 * tap into on a phone, the key as one page of sections, and answers in one
 * card. Since 2026-10-08 the key's pictures are the board's own markup,
 * painted by the board's CSS; the exit-survey block is unchanged.
 */

/* ── Palette (light, then dark) ───────────────────────────────────────── */
.help-center-content {
  --hc-bg: #ffffff;
  --hc-pane: #fcfdfe;
  --hc-card: #ffffff;
  --hc-soft: var(--slate-50, #f8fafc);
  --hc-line: var(--slate-200, #e2e8f0);
  --hc-line-2: var(--slate-100, #f1f5f9);
  --hc-ink: var(--slate-800, #1e293b);
  --hc-ink-2: var(--slate-600, #475569);
  --hc-muted: var(--slate-500, #64748b);
  --hc-faint: var(--slate-400, #94a3b8);
  --hc-tint: var(--primary-50, #f0fdfa);
}
body.dark-mode .help-center-content,
.dark-mode .help-center-content {
  --hc-bg: var(--slate-800, #1e293b);
  --hc-pane: var(--slate-900, #0f172a);
  --hc-card: var(--slate-800, #1e293b);
  --hc-soft: rgba(148, 163, 184, 0.08);
  --hc-line: var(--slate-700, #334155);
  --hc-line-2: rgba(148, 163, 184, 0.12);
  --hc-ink: var(--slate-100, #f1f5f9);
  --hc-ink-2: var(--slate-300, #cbd5e1);
  --hc-muted: var(--slate-400, #94a3b8);
  --hc-faint: var(--slate-500, #64748b);
  --hc-tint: rgba(45, 212, 191, 0.08);
}

/* ── The sheet ────────────────────────────────────────────────────────── */
.help-center-modal .modal-content.help-center-content {
  width: min(1060px, 96vw);
  max-width: 1060px;
  height: min(828px, 92vh);
  max-height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: var(--hc-bg);
  color: var(--hc-ink);
  box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.55);
}
.help-center-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Header: icon, title, search, close in one row */
.hc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 18px 24px;
  border-bottom: 1px solid var(--hc-line-2);
  flex: 0 0 auto;
}
.hc-head-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: var(--primary-100, #ccfbf1);
  color: var(--primary-700, #0f766e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.hc-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-head-text h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--hc-ink); }
.hc-head-text p { margin: 0; font-size: 12.5px; color: var(--hc-muted); }

.help-search {
  position: relative;
  margin-left: auto;
  width: 380px;
  max-width: 46%;
}
.help-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hc-faint);
  font-size: 13px;
  pointer-events: none;
}
.help-search input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--hc-line);
  background: var(--hc-soft);
  padding: 0 40px 0 38px;
  font: 14px var(--font-sans, 'Inter', -apple-system, sans-serif);
  color: var(--hc-ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.help-search input:focus {
  border-color: var(--primary-500, #14b8a6);
  background: var(--hc-card);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}
.help-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--hc-muted);
  cursor: pointer;
}
.help-search-clear:hover { background: var(--hc-line-2); color: var(--hc-ink); }

.hc-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  border: 1px solid var(--hc-line);
  background: var(--hc-card);
  color: var(--hc-ink-2);
  font-size: 14px;
  cursor: pointer;
}
.hc-close:hover { background: var(--hc-soft); color: var(--hc-ink); }

/* Body: rail + pane, each scrolling on its own */
.hc-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.help-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
}
.help-rail {
  border-right: 1px solid var(--hc-line-2);
  padding: 8px 12px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.hc-rail-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-faint);
  padding: 14px 10px 6px;
}
.help-rail-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: 500 13.5px var(--font-sans, 'Inter', -apple-system, sans-serif);
  color: var(--hc-ink-2);
  text-align: left;
  cursor: pointer;
}
.help-rail-btn i { width: 16px; text-align: center; color: var(--hc-faint); font-size: 13px; }
.help-rail-btn:hover { background: var(--hc-soft); color: var(--hc-ink); }
.help-rail-btn.is-active { background: var(--hc-tint); color: var(--primary-700, #0f766e); font-weight: 600; }
.help-rail-btn.is-active i { color: var(--primary-600, #0d9488); }
.hc-rail-n { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--hc-faint); }

.help-pane {
  overflow-y: auto;
  padding: 26px 32px 32px;
  background: var(--hc-pane);
  display: flex;
  flex-direction: column;
  gap: 22px;
  outline: none;
}
/* Pane children never shrink: a flex item with overflow:hidden (the question
   card) may otherwise squash to the pane's height and clip its own rows. */
.help-pane > * { flex-shrink: 0; }
.help-content--search { flex: 1 1 auto; overflow-y: auto; padding: 24px 32px 32px; background: var(--hc-pane); }
.help-results-count { margin: 0 0 16px; font-size: 13px; color: var(--hc-muted); }
.faq-category { margin-bottom: 22px; }
.faq-category .hc-h3 { margin-bottom: 10px; }

/* Shared bits */
.hc-h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-muted);
}
.hc-h3 i { color: var(--primary-600, #0d9488); letter-spacing: 0; }
.hc-block { display: flex; flex-direction: column; gap: 10px; }
.hc-chev { margin-left: auto; color: var(--slate-300, #cbd5e1); font-size: 12px; }
.hc-list {
  background: var(--hc-card);
  border: 1px solid var(--hc-line);
  border-radius: 18px;
  overflow: hidden;
}
.hc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--hc-line-2);
  background: var(--hc-card);
  font: 500 14px var(--font-sans, 'Inter', -apple-system, sans-serif);
  color: var(--hc-ink);
  text-align: left;
  cursor: pointer;
}
.hc-row:last-child { border-bottom: 0; }
.hc-row:hover { background: var(--hc-soft); }
.hc-row > i:first-child { width: 18px; text-align: center; color: var(--primary-500, #14b8a6); }
.hc-row .hc-rail-n { margin-left: auto; }
.hc-row .hc-rail-n + .hc-chev { margin-left: 8px; }
.hc-link {
  border: 0;
  background: none;
  padding: 4px 2px;
  font: 600 13px var(--font-sans, 'Inter', -apple-system, sans-serif);
  color: var(--primary-700, #0f766e);
  cursor: pointer;
}
.hc-link:hover { text-decoration: underline; }

/* Start: the two ways to learn */
.hc-learn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hc-learn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hc-card);
  border: 1px solid var(--hc-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.hc-learn-art { position: relative; height: 136px; overflow: hidden; background: #eef2f6; }
.hc-learn-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hc-learn-body h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--hc-ink); }
.hc-learn-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--hc-muted); }
.hc-learn-badge {
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary-700, #0f766e);
  background: var(--primary-100, #ccfbf1);
  border-radius: 999px;
  padding: 3px 9px;
}

/* Tour picture: three rows of real board cells, the tour's ring and card. */
.hc-mini-rows { position: absolute; left: 18px; right: 18px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.hc-mini-rows .hc-spec-track { height: 34px; }
.hc-mini-rows .cell-hour { display: none; }
.hc-mini-ring {
  position: absolute;
  left: 38%;
  top: 4px;
  width: 52px;
  height: 128px;
  border-radius: 10px;
  border: 2px solid var(--primary-400, #2dd4bf);
  box-shadow: 0 0 0 600px rgba(15, 23, 42, 0.5), 0 0 16px rgba(45, 212, 191, 0.5);
}
.hc-mini-card {
  position: absolute;
  left: calc(38% + 70px);
  top: 26px;
  width: 152px;
  padding: 8px 10px 9px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.5);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hc-mini-card b { font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-700, #0f766e); }
.hc-mini-card i { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.hc-mini-card s { height: 3px; border-radius: 2px; background: var(--slate-200, #e2e8f0); text-decoration: none; }
.hc-mini-card s:first-child { background: var(--primary-300, #5eead4); }
.hc-mini-card s.is-now { background: var(--primary-600, #0d9488); }
.hc-mini-card em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--slate-800, #1e293b); line-height: 1.25; }

/* Show me how picture: the board's own team bar and action bar, copied live. */
.hc-learn-art--practice {
  background: linear-gradient(180deg, var(--primary-50, #f0fdfa), #eef2f6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-mini-scan { display: flex; flex-direction: column; align-items: center; gap: 4px; transform: scale(1.15); }
.hc-mini-hand {
  position: absolute;
  left: calc(50% + 6px);
  top: 84px;
  font-size: 24px;
  color: var(--slate-900, #0f172a);
  filter: drop-shadow(0 2px 2px rgba(255, 255, 255, 0.9));
}
.hc-mini-hand--solo { position: static; font-size: 40px; color: var(--primary-600, #0d9488); filter: none; }

/* Tips line */
.hc-tips {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--hc-soft);
  font-size: 13px;
  color: var(--hc-muted);
}
.hc-tips > i { color: var(--amber-500, #f59e0b); }
.hc-tips .hc-link { margin-left: auto; }

/* The key teaser */
.hc-teaser {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--hc-line);
  border-radius: 18px;
  background: var(--hc-card);
  text-align: left;
  font-family: inherit;
  color: var(--hc-ink);
  cursor: pointer;
}
.hc-teaser:hover { background: var(--hc-soft); }
.hc-teaser-art { display: flex; flex-direction: column; gap: 6px; width: 190px; flex: 0 0 190px; }
.hc-teaser-art .event-chip { cursor: default; width: 100%; pointer-events: none; }
.hc-teaser-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hc-teaser-text b { font-size: 15px; }
.hc-teaser-text small { font-size: 13px; color: var(--hc-muted); }

/* Phone-only pieces */
.hc-browse, .hc-back { display: none; }

/* Section headings */
.hc-pane-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--hc-ink); }
.hc-pane-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--hc-muted); }
.hc-pane-head--row { display: flex; align-items: baseline; gap: 10px; }
.hc-count { font-size: 13px; color: var(--hc-faint); }

/* The key: jump row + one card per channel */
.hc-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-jump-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hc-line);
  background: var(--hc-card);
  font: 600 12.5px var(--font-sans, 'Inter', -apple-system, sans-serif);
  color: var(--hc-ink-2);
  cursor: pointer;
}
.hc-jump-chip:hover { border-color: var(--primary-300, #5eead4); color: var(--primary-700, #0f766e); }
.hc-key-sec {
  background: var(--hc-card);
  border: 1px solid var(--hc-line);
  border-radius: 18px;
  padding: 16px 18px 18px;
  scroll-margin-top: 12px;
}
.hc-key-sec > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--hc-ink);
}
.hc-key-sec > h3 i { color: var(--primary-600, #0d9488); font-size: 14px; }

/* Questions: one card, one row each, the open one tinted.
   Scoped three classes deep on purpose: style.css's pricing modal owns a
   global .faq-item (padding, slate-50 fill, radius; and a body.dark-mode
   twin), which used to bleed in and turn every row into its own grey box. */
.help-center-modal .help-center-content .faq-list {
  display: flex;
  flex-direction: column;
  background: var(--hc-card);
  border: 1px solid var(--hc-line);
  border-radius: 18px;
  overflow: hidden;
}
.help-center-modal .help-center-content .faq-item {
  padding: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--hc-line-2);
}
.help-center-modal .help-center-content .faq-item:last-child { border-bottom: 0; }
.help-center-modal .help-center-content .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 18px;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--hc-ink);
  cursor: pointer;
  list-style: none;
}
.help-center-modal .help-center-content .faq-item summary::-webkit-details-marker { display: none; }
.help-center-modal .help-center-content .faq-item summary:hover { background: var(--hc-soft); }
.help-center-modal .help-center-content .faq-item summary i { color: var(--hc-faint); font-size: 12px; flex-shrink: 0; transition: transform 0.2s ease; }
.help-center-modal .help-center-content .faq-item[open] { background: var(--hc-tint); }
.help-center-modal .help-center-content .faq-item[open] summary { font-weight: 700; }
.help-center-modal .help-center-content .faq-item[open] summary:hover { background: transparent; }
.help-center-modal .help-center-content .faq-item[open] summary i { transform: rotate(180deg); color: var(--primary-600, #0d9488); }
.help-center-modal .help-center-content .faq-answer {
  padding: 0 18px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hc-ink-2);
}
.help-center-modal .help-center-content .faq-answer strong { color: var(--hc-ink); }
.hc-showme { margin-top: 14px; }
.hc-showme .fr-guide-btn { height: 36px; font-size: 13px; }

/* Contact & shortcuts */
.hc-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--hc-card);
  border: 1px solid var(--hc-line);
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.hc-contact-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background: var(--primary-100, #ccfbf1);
  color: var(--primary-700, #0f766e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.hc-contact-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hc-contact-text b { font-size: 16px; color: var(--hc-ink); }
.hc-contact-text small { font-size: 13.5px; color: var(--hc-muted); }
.hc-contact .fr-guide-btn { margin-left: auto; text-decoration: none; }
.hc-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hc-keys section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shortcuts-list {
  background: var(--hc-card);
  border: 1px solid var(--hc-line);
  border-radius: 18px;
  padding: 4px 16px;
}
.shortcut-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hc-line-2);
  font-size: 13.5px;
  color: var(--hc-ink);
}
.shortcut-item:last-child { border-bottom: 0; }
.shortcut-keys { display: inline-flex; gap: 4px; min-width: 66px; }
.shortcut-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 7px;
  background: var(--hc-soft);
  border: 1px solid var(--hc-line);
  border-bottom-width: 2px;
  font: 600 12px var(--font-sans, 'Inter', sans-serif);
  color: var(--hc-ink-2);
}

/* No results */
.help-no-results { text-align: center; padding: 48px 24px; color: var(--hc-muted); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.help-no-results > i { font-size: 2.2rem; color: var(--slate-300, #cbd5e1); }
.help-no-results p { margin: 0; }

/* ── Phones: a full-screen sheet, a list you tap into ─────────────────── */
@media (max-width: 640px) {
  .help-center-modal .modal-content,
  .help-center-modal .modal-content.help-center-content {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
  .hc-head { flex-wrap: wrap; padding: 14px 14px 12px; gap: 12px; }
  .hc-head-text h2 { font-size: 20px; }
  .hc-close { margin-left: auto; width: 44px; height: 44px; flex-basis: 44px; }
  .help-search { order: 3; width: 100%; max-width: none; margin-left: 0; flex: 1 1 100%; }
  .help-search input { height: 46px; font-size: 16px; } /* 16px stops iOS zooming in */
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-rail { display: none; }
  .help-pane, .help-content--search { padding: 16px 14px 32px; gap: 18px; }
  .hc-learn { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hc-learn-art { height: 112px; }
  .hc-mini-ring { left: 26%; height: 96px; }
  .hc-mini-card { left: calc(26% + 70px); top: 16px; }
  .hc-browse { display: flex; flex-direction: column; gap: 10px; }
  .hc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    height: 44px;
    margin: -8px 0 -10px -6px;
    padding: 0 6px;
    border: 0;
    background: none;
    font: 600 15px var(--font-sans, 'Inter', -apple-system, sans-serif);
    color: var(--primary-700, #0f766e);
  }
  .hc-teaser-art { width: 120px; flex-basis: 120px; }
  .hc-keys { grid-template-columns: minmax(0, 1fr); }
  .shortcuts-list { grid-template-columns: 1fr; }
  .hc-contact { flex-wrap: wrap; }
  .hc-contact .fr-guide-btn { margin-left: 0; width: 100%; }
  .help-center-modal .help-center-content .faq-item summary { min-height: 56px; font-size: 15px; }
  .help-center-modal .help-center-content .faq-answer { font-size: 15px; }
}

/* ── The key's live renderers (unchanged rules, 2026-07/09) ───────────── */
.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);
}

/* ── 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; }

/* The Fairness panel's dial and landed bar, sample numbers (2026-10-08).
   The parts' own rules (.fr-bd, .fr-bandbar, .fr-key) live in
   panel-chrome.css; this only lays them side by side. */
.hc-fair {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.hc-fair-dial svg { display: block; width: 170px; height: 170px; }
/* The word and window tag, as the panel's hero paints them. */
.hc-fair-word {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}
.hc-fair-window {
  display: inline-block;
  margin: 4px 0 12px;
  padding: 1px 9px;
  border-radius: 999px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 600;
}
body.dark-mode .hc-fair-window { background: #0f2422; color: #5eead4; }
@media (max-width: 600px) {
  .hc-fair { grid-template-columns: 1fr; justify-items: center; }
  .hc-fair-side { width: 100%; }
}
body.dark-mode .faq-answer-visual {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}
/* ── 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);
}
@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-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; }
}

/* ============================================
   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;
}


/* Exit survey: dark mode + phones */
.dark-mode .exit-survey-modal .modal-content { background: var(--surface-secondary, #1e293b); }
.dark-mode .exit-survey-footer { background: var(--bg-secondary, #111827); border-color: var(--border-color, #374151); }
.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); }
@media (max-width: 640px) {
  .offer-content { flex-direction: column; text-align: center; }
}

/* ── The key's specimens (2026-10-08 audit) ─────────────────────────────
   Board parts rebuilt in Help (.timeline-cell, .timeline-event-marker, the
   pill, the now line). The board's own stylesheet paints them; these rules
   only give them a track to sit in, at the board's height. */
.hc-spec {
  --timeline-zoom-scale: 1;
  padding-top: 12px;
}
.hc-spec:not(.hc-spec--now) { padding-top: 0; }
.hc-spec-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: 64px;
  border-radius: 8px;
  overflow: visible;
}
.hc-spec-track .timeline-cell {
  height: 100%;
  min-width: 0;
  cursor: default;
}
.hc-spec-track .timeline-cell:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.hc-spec-track .timeline-cell:nth-last-child(1 of .timeline-cell) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.hc-spec-track .timeline-event-marker { pointer-events: none; }
/* The upper lane; a .stack-1 event keeps the board's lower lane. */
.hc-spec-track .timeline-event-marker:not(.stack-1) { top: 4px; }
.hc-spec-track .now-time-badge { top: -1px; }
.hc-spec-pill { display: inline-flex; }
.hc-spec-pill .availability-status { position: static; }

.hc-key-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--hc-ink-2); }
.hc-key-sub { margin: 18px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-muted); }
.hc-key-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--hc-soft); font-size: 13px; line-height: 1.5; color: var(--hc-ink-2); }
.hc-key-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.hc-key-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.hc-key-item { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: center; }
.hc-key-item .hc-key-spec:empty { display: none; }
.hc-key-item:has(.hc-key-spec:empty) { grid-template-columns: minmax(0, 1fr); }
.hc-key-copy { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.45; color: var(--hc-ink-2); min-width: 0; }
.hc-key-copy strong { color: var(--hc-ink); font-size: 14px; }
.hc-key-list--grid .hc-key-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.hc-key-glyphs { display: inline-flex; gap: 10px; font-size: 20px; line-height: 1; }
.hc-glyph-star { color: #fbbf24; }
.hc-glyph-diamond { color: var(--status-available); }
/* The annotated pictures (BoardSpecimens.figures, shared with the tour and
   Show me how) read the guide card's tokens; in Help they are Help's own. */
.help-center-content {
  --guide-ink: var(--hc-ink);
  --guide-ink-2: var(--hc-ink-2);
  --guide-muted: var(--hc-muted);
  --guide-line: var(--hc-line);
  --guide-soft: var(--hc-soft);
  --guide-surface: var(--hc-card);
}
.hc-key-body .bs-annot-key { font-size: 13.5px; line-height: 1.45; gap: 7px; }
.hc-key-body .bs-annot + .bs-annot,
.hc-key-body .bs-keylist--inline + .bs-annot { margin-top: 16px; }
.hc-key-body .bs-keylist--inline + .hc-key-list { margin-top: 18px; }
/* The scanner picture keeps a board's proportions on a wide pane. */
.hc-key-body .bs-annot--scan { max-width: 600px; }
.hc-key-body .bs-pilllist { font-size: 13.5px; }
.hc-key-mode-q { margin: -2px 0 10px; font-size: 13px; line-height: 1.4; color: var(--hc-ink-2); }
.hc-key-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hc-key-mode {
  position: static;
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--hc-line);
  border-radius: 14px;
  background: var(--hc-card);
}
.hc-key-mode-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--hc-ink); }
.hc-key-mode-head i { color: var(--primary-600, #0d9488); }
.help-vis-compare .hc-spec { margin: 4px 0; }

@media (max-width: 640px) {
  .hc-key-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hc-key-list--grid, .hc-key-modes { grid-template-columns: minmax(0, 1fr); }
}