/**
 * TICKET-336: Submit Word Page — token-based rewrite
 *
 * Loaded on the Submit Word page template only (via codeword-enqueue.php).
 * Replaces the original hardcoded-colour version with design-token equivalents
 * so the form renders correctly in both dark (default) and light mode.
 *
 * Width: inherits 1080px from .container (premium.css) — the former 800px
 * override has been removed so the page uses the shared secondary-page shell.
 *
 * Rules:
 *  - Form surface uses --bg-panel (dark) / --surface-paper (light)
 *  - Accent follows --accent (gold) throughout
 *  - Validation states use --danger / --reward-glow / --accent tokens
 *  - No hardcoded hex values
 */

/* ─── Page header ────────────────────────────────────────────────────────────── */

.submit-word-page h1 {
  margin-bottom: 0.5rem;
}

.submit-word-page .links {
  margin-bottom: 1.75rem;
}

.submit-word-page .links a {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--dur-fast);
}

.submit-word-page .links a:hover {
  color: var(--accent);
  text-decoration: none;
  opacity: 1;
}

/* ─── Form surface ───────────────────────────────────────────────────────────── */

.submission-form {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 1.75rem;
  margin-bottom: 2rem;
}

html.light-mode .submission-form {
  background-color: var(--surface-paper);
  border-color: var(--line-soft);
  box-shadow: var(--surface-stack-shadow);
}

/* ─── Intro text ─────────────────────────────────────────────────────────────── */

.submission-form .instructions {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

html.light-mode .submission-form .instructions {
  color: var(--ink-slate);
}

/* ─── Form groups ────────────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-logic);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

html.light-mode .form-group label {
  color: var(--ink-blueprint);
}

/* ─── Text inputs and textarea ───────────────────────────────────────────────── */

input#word,
textarea#definition {
  margin: 0 0 0.25rem;  /* reset old 1rem all-sides margin */
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-logic);
  font-size: 0.9375rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  box-sizing: border-box;
}

html.light-mode .form-group input[type="text"],
html.light-mode .form-group textarea,
html.light-mode .form-group select {
  background-color: #fff;
  border-color: var(--line-soft);
  color: var(--ink-blueprint);
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.form-group textarea {
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.6;
}

/* ─── Checkbox group ─────────────────────────────────────────────────────────── */

.checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--font-logic);
  font-size: 0.9375rem;
  color: var(--text-primary);
}

html.light-mode .checkbox-label {
  color: var(--ink-blueprint);
}

.checkbox-label input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ─── Validation / captcha section ──────────────────────────────────────────── */

.validation-group {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 1.125rem 1.25rem;
  margin-bottom: 1.5rem;
}

html.light-mode .validation-group {
  background-color: var(--amber-soft, rgba(212, 175, 55, 0.08));
  border-color: var(--line-soft);
  border-left-color: var(--accent);
}

.validation-text {
  font-family: var(--font-logic);
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 0.875rem;
  line-height: 1.6;
}

html.light-mode .validation-text {
  color: var(--ink-slate);
}

.captcha-container {
  font-family: var(--font-logic);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0.5rem;
}

html.light-mode .captcha-container {
  color: var(--ink-blueprint);
}

.captcha-input-container {
  display: inline-block;
  margin: 0 2px;
}

.captcha-input-container input {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  font-family: var(--font-logic);
  font-size: 1.125rem;
  font-weight: 600;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background-color: var(--bg-panel);
  color: var(--text-primary);
  padding: 0.25rem;
}

html.light-mode .captcha-input-container input {
  background-color: #fff;
  color: var(--ink-blueprint);
}

/* ─── Form messages ──────────────────────────────────────────────────────────── */

.form-message {
  margin-bottom: 1.25rem;
}

.error-message {
  background-color: var(--danger-glow);
  color: var(--danger);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 0.875rem;
  font-family: var(--font-logic);
  font-size: 0.9375rem;
  font-weight: 500;
  border-left: 4px solid var(--danger);
}

.success-message {
  background-color: var(--reward-glow);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 0.875rem;
  font-family: var(--font-logic);
  font-size: 0.9375rem;
  font-weight: 500;
  border-left: 4px solid var(--accent);
}

html.light-mode .success-message {
  color: var(--ink-blueprint);
}

/* ─── Submit button ──────────────────────────────────────────────────────────── */

.submit-btn {
  background-color: var(--accent);
  color: var(--ink-nocturnal);
  border: none;
  padding: 0.6875rem 1.5rem;
  font-family: var(--font-logic);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast);
}

.submit-btn:hover {
  background-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.submit-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ─── Loading state ──────────────────────────────────────────────────────────── */

.loading .submit-btn {
  opacity: 0.7;
  cursor: wait;
  position: relative;
  padding-left: 2.5rem;
}

.loading .submit-btn::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: -0.5625rem;
  border: 2px solid rgba(29, 35, 39, 0.3);
  border-top-color: var(--ink-nocturnal);
  border-radius: 50%;
  animation: cws-spin 0.8s linear infinite;
}

@keyframes cws-spin {
  to { transform: rotate(360deg); }
}

/* ─── Mobile ─────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .submission-form {
    padding: 1.25rem 1rem;
  }

  .form-group input[type="text"],
  .form-group textarea,
  .form-group select {
    font-size: 1rem; /* prevent iOS zoom on focus */
  }

  .submit-btn {
    width: 100%;
    text-align: center;
    padding: 0.75rem;
  }
}