/* ══════════════════════════════════════════════════════════════════
   how_it_works_modal.css — R5 §2.3.b (Session 12)

   Session 12 originally mirrored auth_modal.css visual language:
   same 380px card width, overlay backdrop, JetBrainsMono uppercase
   title, border and typography treatment. Session 17 widened the
   card to 480px (see .hiw-card comment for full rationale) — auth
   modal still 380. Everything else remains a mirror: overlay,
   header, title font, close button, section typography.

   Completely isolated from styles.css and auth_modal.css — no shared
   selectors. All rules prefixed with .hiw- or #hiw- / #nav-how-it-works-btn
   to avoid any conflicts.

   Class contract (set by how_it_works_modal.js):
     .hiw-overlay.open  → visible
════════════════════════════════════════════════════════════════════ */

/* ── Nav button (static in index.html, styled here) ──────────────── */
/* Same typography as #nav-auth-btn from auth_modal.css. Sits to the
   LEFT of the Login button in the header nav. */
#nav-how-it-works-btn {
  font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  word-spacing: -0.15em;   /* Session 12 tweak — tighten inter-word gap so
                              "HOW IT WORKS" reads as one unit, not three */
  text-transform: uppercase;
  color: #0a0a0a;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  margin-right: 16px;    /* space between "How it works" and "Login" */
  outline: none;
  transition: color 0.15s;
}

#nav-how-it-works-btn:hover { color: #6b6b6b; }

#nav-how-it-works-btn:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Overlay backdrop ────────────────────────────────────────────── */
.hiw-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(10, 10, 10, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.20s ease, visibility 0.20s ease;
}

.hiw-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ── Modal card ──────────────────────────────────────────────────── */
.hiw-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  width: 480px;                 /* Session 17 widened from 380px. Was
                                   strict-mirror of auth modal per Session
                                   12; new HOW TO PLAY body has 4 sections
                                   (was 3) plus denser paragraphs, and 380
                                   forced modal-body scroll. 480 fits all
                                   content without scroll at desktop viewports.
                                   Auth modal remains 380 — this is a
                                   deliberate divergence, not a shared
                                   width to keep in sync. */
  padding: 0 0 28px;
  position: fixed;
  top: 80px;                    /* consistent distance from top */
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  transition: transform 0.20s ease;

  /* Long content safety net — even though copy was budgeted to fit
     ~500px, small viewports could still overflow. Cap at 85% viewport
     height and allow internal scroll on the body if needed. */
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.hiw-overlay.open .hiw-card {
  transform: translateX(-50%) translateY(0);
}

/* ── Card header ─────────────────────────────────────────────────── */
.hiw-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid #e0e0e0;
  flex: 0 0 auto;               /* header height fixed; body scrolls if needed */
}

.hiw-card-title {
  font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #0a0a0a;
}

/* ── Close button ────────────────────────────────────────────────── */
.hiw-close {
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b6b6b;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  outline: none;
  transition: color 0.15s;
}

.hiw-close:hover { color: #0a0a0a; }

.hiw-close:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Body ────────────────────────────────────────────────────────── */
.hiw-body {
  padding: 22px 28px 4px;
  overflow-y: auto;             /* scrolls if content exceeds max-height */
  flex: 1 1 auto;
}

/* ── Section ─────────────────────────────────────────────────────── */
/* Sections stack vertically with generous separation. The section
   title is styled like the auth modal's card title but slightly smaller
   to establish a hierarchy: modal title (14px) > section title (11px). */
.hiw-section {
  margin-bottom: 22px;
}

.hiw-section:last-child {
  margin-bottom: 0;
}

.hiw-section-title {
  font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin: 0 0 10px;
}

.hiw-section p {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #2a2a2a;
  line-height: 1.55;
  margin: 0 0 10px;
}

.hiw-section p:last-child {
  margin-bottom: 0;
}

.hiw-section strong {
  font-weight: 500;
  color: #0a0a0a;
}

/* ── Narrow viewport ─────────────────────────────────────────────── */
/* Collapses to near-full-width on viewports too narrow to fit the
   480px card comfortably. Breakpoint bumped from 440 to 520 in
   Session 17 alongside the card widening — was calibrated to the
   380px card's breathing room; new 480px card needs a wider trigger
   or it kisses the viewport edges before collapse fires. Auth modal
   keeps its own 440 breakpoint since it's still 380px wide. */
@media (max-width: 520px) {
  .hiw-card {
    width: calc(100% - 32px);
    left: 16px;
    transform: translateX(0) translateY(12px);
  }
  .hiw-overlay.open .hiw-card {
    transform: translateX(0) translateY(0);
  }
}