/*
 * help.css — Phase 2.6 (#5) HELP GUIDES. Built from the existing OSR system:
 * Stone Wall .panel surfaces, parchment reading panel, single accent
 * (var(--color-accent)), border-radius:0. No new colors — all tokens reference
 * base.css so a theme/accent change cascades. Reuses .module-view__title/__tagline
 * (layout.css), .panel / .btn (components.css), .profile__loading (profile.css).
 */

.help {
  max-width: 880px;
}

.help__page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.help__head-actions {
  flex-shrink: 0;
}

/* ---- guide index (landing) ---------------------------------------------- */

.help__index-panel {
  padding: var(--space-md);
}

.help__index .profile__loading,
.help__index .auth-landing__notice-body {
  margin: 0;
  padding: var(--space-md);
}

.help__index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-xs) var(--space-md);
}

.help__index-item {
  margin: 0;
}

.help__index-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.help__index-link:hover,
.help__index-link:focus-visible {
  border-left-color: var(--color-accent);
  background: var(--color-surface-hover);
  color: var(--color-accent);
}

.help__index-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- grouped guide index (Help overhaul 2026-06-12) ---------------------- */
/*
 * Group headers mirror the nav-menu idiom: Cinzel small-caps at --text-sm with
 * the shared caps tracking, muted ink, and a hairline rule running out to the
 * right edge (the OSR "section rule" treatment). Tokens only — no new colors.
 */

.help__index-group {
  margin-top: var(--space-lg);
}

.help__index-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text-muted);
}

.help__index-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ---- rendered markdown (page view) -------------------------------------- */

.help-md {
  padding: var(--space-lg) var(--space-xl);
  line-height: 1.6;
}

.help-md .profile__loading {
  margin: 0;
}

.help-md__h {
  font-family: var(--font-heading-ui);
  color: var(--color-heading);
  letter-spacing: var(--ls-cinzel-caps);
  line-height: 1.25;
}

.help-md__h2 {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-md);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-xs);
}

.help-md__h3 {
  font-size: var(--text-h4);
  margin: var(--space-lg) 0 var(--space-sm);
}

.help-md__h4 {
  font-size: var(--text-h5);
  text-transform: uppercase;
  margin: var(--space-md) 0 var(--space-xs);
  color: var(--color-text-muted);
}

.help-md__p {
  margin: 0 0 var(--space-md);
}

.help-md__list {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.help-md__list--ordered {
  list-style: decimal;
}

.help-md__li {
  margin: 0 0 var(--space-xs);
}

.help-md__quote {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  font-style: italic;
}

.help-md__code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface-hover);
  padding: 0.1em 0.35em;
  border: 1px solid var(--color-border);
}

.help-md__link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.help-md__link:hover,
.help-md__link:focus-visible {
  color: var(--color-accent-hover);
}

.help-md__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- inline figures (block images in guide markdown) --------------------- */
/*
 * Same framing family as .help-shot (border + dark plate) so inline shots read
 * as siblings of the hero shot; caption echoes the legend's accent rail.
 */

.help-md__fig {
  margin: var(--space-md) 0 var(--space-lg);
}

.help-md__img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  background: var(--color-surface, #000);
}

.help-md__figcap {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  font-size: var(--text-sm, 0.85rem);
  font-style: italic;
  line-height: 1.5;
}

/* ---- annotated screenshot (Phase 2.6 #2b) ------------------------------- */
/*
 * Numbered markers are absolutely positioned by PERCENT over the screenshot, so
 * they stay aligned at any width. The figure sits above the guide text; legend
 * pairs each number with its caption. All tokens reference base.css so a
 * theme/accent change cascades (no new colors).
 */

.help-shot {
  margin: 0 0 var(--space-lg);
}

.help-shot__figure {
  margin: 0;
}

.help-shot__frame {
  position: relative;
  display: block;
  border: 1px solid var(--color-border);
  background: var(--color-surface, #000);
  line-height: 0; /* kill descender gap under the img */
}

.help-shot__img {
  display: block;
  width: 100%;
  height: auto;
}

.help-shot__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* markers are decorative; the legend is the content */
}

.help-shot__marker {
  position: absolute;
  transform: translate(-50%, -50%); /* center the marker on its xPct/yPct point */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.2rem;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--color-bg, #000);
  background: var(--color-accent);
  color: var(--ink-on-accent, #d8d7d7);
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm, 0.8rem);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 1px var(--color-accent), 0 1px 4px rgba(0, 0, 0, 0.6);
}

.help-shot__legend {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface-hover);
  display: grid;
  gap: var(--space-xs);
}

.help-shot__legend-item {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--space-sm);
  align-items: start;
  line-height: 1.5;
}

.help-shot__legend-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--ink-on-accent, #d8d7d7);
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm, 0.8rem);
  font-weight: 700;
  line-height: 1;
}

.help-shot__legend-cap {
  color: var(--color-text);
}

@media (prefers-reduced-motion: no-preference) {
  .help-shot__marker {
    animation: help-shot-pop 0.18s ease-out both;
  }
}

@keyframes help-shot-pop {
  from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ---- About page --------------------------------------------------------- */
/* Reuses the Help page chrome (.help__page-head) + the .help-md markdown styles
 * (the changelog's `## Changelog` -> .help-md__h2 and per-version
 * `### vX.Y — date` -> .help-md__h3, so versions read as clear section heads).
 * Only the container width cap is About-specific; everything else cascades from
 * the shared .help-md rules, which already reflow to a single comfortable column
 * at 390px. No new colors. */
.about {
  max-width: 880px;
}

/* ---- About: Go-Live stats tracker --------------------------------------- */
/* A real <table> (caption + column heads + row heads) restyled as a responsive
 * stat grid via display roles, so screen readers still get table semantics.
 * Tokens only — no new colors; the accent rail + Stone Wall surface match the
 * rest of the OSR system. Sits above the changelog panel. */
.about-stats {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.about-stats__table {
  width: 100%;
  border-collapse: collapse;
}

/* Caption = the milestone marker: a small-caps "Go Live" badge + nice date. */
.about-stats__caption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  text-align: left;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.about-stats__badge {
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 0.15em 0.6em;
}

.about-stats__date {
  font-family: var(--font-heading-ui);
  font-size: var(--text-h4);
  color: var(--color-heading);
  letter-spacing: var(--ls-cinzel-caps);
}

/* Visually-hidden thead: kept in the a11y tree, off-screen for sighted users. */
.about-stats__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* tbody -> responsive grid of cells; tr/th/td get display roles so the visual
 * layout is free while the table's a11y semantics are preserved. */
.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.about-stats__cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-hover);
  border-left: 2px solid var(--color-accent);
}

.about-stats__metric {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 400;
  text-align: left;
  color: var(--color-text);
}

.about-stats__glyph-wrap {
  display: inline-flex;
  color: var(--color-accent);
  flex-shrink: 0;
}

.about-stats__glyph {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.about-stats__label {
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text-muted);
}

.about-stats__count {
  font-family: var(--font-heading-ui);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Single comfortable column on narrow viewports (matches the .help-md reflow). */
@media (max-width: 480px) {
  .about-stats__grid {
    grid-template-columns: 1fr;
  }
}