/* ============================================================
   CCM-INITIALS.CSS — "Put a name to the initials" page
   Screen styles + a print stylesheet that turns the same page
   into a handwriting worksheet (the Graham pipeline).
   ============================================================ */

.in-head {
  border-bottom: 1px solid var(--border);
  padding: 48px 24px 40px;
}
.in-head-inner { max-width: 900px; margin: 0 auto; }
.in-stand {
  max-width: 720px; margin-top: 16px;
  font-size: var(--text-md); color: var(--text-secondary); line-height: 1.65;
}
.in-stand strong { color: var(--text); }
.in-contributor {
  margin-top: 16px; font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--muted);
}
.in-contributor a { color: var(--red); }

.in-body { max-width: 900px; margin: 0 auto; padding: 32px 24px 64px; }

/* ── Controls ── */
.in-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.in-search {
  flex: 1 1 260px; padding: 10px 14px;
  font-family: var(--font-body); font-size: var(--text-base);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.in-search:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.in-decades { display: flex; flex-wrap: wrap; gap: 6px; }
.in-decade-btn {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary);
}
.in-decade-btn.active { border-color: var(--red); color: var(--red); background: var(--bg); }

.in-count {
  margin: 18px 0 4px; font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--muted);
}

.in-loading, .in-empty {
  padding: 48px 0; text-align: center;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted);
}

/* ── Rows ── */
.in-row {
  border-bottom: 1px solid var(--border);
  padding: 16px 8px; cursor: pointer;
}
.in-row:hover { background: var(--surface2, var(--surface)); }
.in-row.done { cursor: default; }
.in-row-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); text-transform: uppercase; color: var(--text);
  display: inline-block; margin-right: 12px;
}
.in-row-meta {
  display: inline-block; font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--muted);
}
.in-row-wins {
  margin-top: 4px; font-size: var(--text-sm);
  color: var(--text-secondary); line-height: 1.5;
}
.in-row-cta {
  margin-top: 8px; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--red);
}
.in-row-done {
  margin-top: 8px; font-size: var(--text-sm); color: var(--success);
}
.in-row-done a { color: var(--muted); margin-left: 6px; }

/* ── Inline form ── */
.in-form {
  margin-top: 14px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--red); cursor: default;
}
.in-form-q {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); text-transform: uppercase; margin-bottom: 10px;
}
.in-input {
  display: block; width: 100%; margin-bottom: 8px; padding: 10px 12px;
  font-family: var(--font-body); font-size: var(--text-base);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.in-input:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.in-id-fields { margin-top: 12px; }
.in-id-note {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--muted); margin-bottom: 8px;
}
.in-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.in-btn {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 10px 22px; cursor: pointer;
  border: 2px solid var(--red); background: var(--red); color: var(--on-accent);
}
.in-btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.in-btn:disabled { opacity: 0.6; cursor: default; }
.in-btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.in-btn--ghost:hover { background: transparent; border-color: var(--red); color: var(--red); }
.in-form-msg { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }

/* ── Story box ── */
.in-story {
  margin-top: 56px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--red);
}
.in-story-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); text-transform: uppercase; margin-bottom: 8px;
}
.in-story-lead { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 14px; line-height: 1.6; }
.in-textarea {
  display: block; width: 100%; padding: 12px;
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  resize: vertical;
}
.in-textarea:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.in-story .in-form-actions { margin-top: 12px; }

/* Honeypot — invisible to humans, present for bots */
.in-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Screen-only vs print-only elements */
.in-print-note, .in-print-line { display: none; }

@media (max-width: 860px) {
  .in-head { padding: 36px 20px 28px; }
  .in-body { padding: 24px 20px 48px; }
  .in-row-name { display: block; margin-right: 0; }
  .in-row-meta { display: block; margin-top: 2px; }
}

/* ── PRINT: the same page becomes a worksheet ── */
@media print {
  #nav-placeholder, nav, .nav-mobile-menu, .in-controls, .in-contributor,
  .in-row-cta, .in-row-done, .in-form, .in-story, .share-strip,
  .sponsor-strip, footer, #footer-placeholder, #sponsors-placeholder { display: none !important; }
  .in-head { border-bottom: 2px solid #000; padding: 0 0 16px; }
  .in-body { padding: 16px 0; max-width: none; }
  .in-print-note {
    display: block; margin: 0 0 8px; font-size: 11pt; font-style: italic;
  }
  .in-row { page-break-inside: avoid; padding: 10px 0; }
  .in-print-line {
    display: block; margin-top: 14px; height: 1px;
    border-bottom: 1px dotted #888;
  }
  .in-count { display: block; }
}