/* Q-Explorator field guide — sidebar rail + numbered "specimen" sections,
   built entirely from the site's own tokens/components (badge-schematic,
   device-frame, label-mono) rather than a separate visual language, so it
   reads as part of qfabrica.com, not an embedded foreign document. */

.help-shell code,
.help-shell .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--color-text);
}

.help-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 880px) {
  .help-shell { grid-template-columns: 1fr; }
  .help-rail { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--color-border); padding: 0 0 var(--space-3); }
}

.help-rail {
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  padding-right: var(--space-3);
}
.help-rail__group {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-label);
  margin: var(--space-3) 0 6px;
}
.help-rail__group:first-child { margin-top: 0; }
.help-rail a {
  display: block;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--radius);
}
.help-rail a:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.05); text-decoration: none; }

.help-hero {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.help-hero__copy { flex: 1; min-width: 280px; }
.help-hero__lede { max-width: 62ch; margin-top: var(--space-2); }
.help-hero__mascot { width: 180px; flex-shrink: 0; }
.help-hero__mascot img { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.4)); }
@media (max-width: 700px) {
  .help-hero__mascot { width: 130px; }
}

.help-section { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); scroll-margin-top: 90px; }
.help-section:last-of-type { border-bottom: none; }
.help-section:target { background: rgba(77, 144, 201, 0.06); }
.help-section__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.help-section__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-label);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px 7px;
  flex-shrink: 0;
}
.help-section__dek { color: var(--color-text-secondary); max-width: 68ch; margin: 10px 0 var(--space-3); }

.help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.help-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px 18px; }
.help-card__tag { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px; }
.help-card h3 { font-size: 16px; margin: 0 0 6px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 600; }
.help-card p { font-size: 13.5px; color: var(--color-text-secondary); margin: 0; }

.help-steps { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-left: 2px solid var(--color-border); }
.help-steps li { position: relative; padding: 0 0 20px 20px; }
.help-steps li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg); }
.help-steps strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.help-steps span { color: var(--color-text-secondary); font-size: 13.5px; }

.help-code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  margin: 14px 0;
}
.help-code .c { color: var(--color-text-label); }
.help-code .k { color: var(--color-accent-explorator); font-weight: 500; }

.help-table-wrap { overflow-x: auto; }
table.help-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; }
table.help-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-label);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 10px;
}
table.help-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; color: var(--color-text-secondary); }
table.help-table tr:last-child td { border-bottom: none; }

.help-tip {
  border-left: 3px solid var(--color-accent-explorator);
  background: rgba(123, 167, 217, 0.08);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  font-size: 13.5px;
  margin: 16px 0;
  color: var(--color-text-secondary);
}
.help-tip strong { color: var(--color-accent-explorator); }

.help-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--color-text);
}

/* Screenshots reuse the site's own .device-frame component (same Windows-
   chrome mockup already used for Q-Explorator's feature videos) instead of
   a page-specific image wrapper. */
/* Screenshots render at their own native size — the app's dialogs really
   are different sizes from each other, and forcing every image to fill a
   fixed-width frame (width:100%) stretched small dialogs up and shrank
   large ones down to a uniform width, misrepresenting the actual UI.
   inline-block makes the frame shrink-wrap to whatever size the image
   actually is; max-width:100% only kicks in to prevent overflow on a
   narrow viewport or an unusually wide screenshot. */
.help-shot { margin: var(--space-3) 0 4px; }
.help-shot .device-frame { display: inline-block; max-width: 100%; }
.help-shot .device-frame__body img { width: auto; max-width: 100%; height: auto; display: block; }