/* ============================================================
   Skill / content forms (D1: "The Codex")
   Consumes tokens from css/codex.css. Used by skill.php, question.php,
   skill_details.php, and (via event_sections.css) event.php.
   ============================================================ */

/* Add ("+") button in section headers — gold on the light headers.
   .skillHeader (dark) + event overrides restyle it in context. */
.addBtn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
  color: var(--gold-deep);
  font-size: 17px; font-weight: 700; cursor: pointer;
  margin-right: 8px;
  transition: background .2s, transform .15s, border-color .2s;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.addBtn:hover { background: #f0e0b8; border-color: var(--gold); transform: scale(1.08) }
.addBtn:active { transform: scale(.94) }
.skillHeader .addBtn {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #f4f1ea;
}
.skillHeader .addBtn:hover { background: rgba(255,255,255,.24) }

/* Form container */
.addFormWrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
}

/* Inline form (alias) */
.addContentFormInline { display: flex; align-items: center; gap: 8px }
.addContentFormInline .inlineInput {
  flex: 1; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 14px; font-family: var(--font-body); background: var(--card);
}
.addContentFormInline .inlineInput:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft) }
.btnInline { padding: 9px 12px !important; white-space: nowrap; flex-shrink: 0 }

/* Login / username prompts */
.loginPrompt { text-align: center; padding: 16px; color: var(--muted); font-size: 14px }
.loginPrompt a { color: var(--gold-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold-line) }
.loginPrompt a:hover { border-bottom-color: var(--gold) }

/* Fields */
.formField { margin-bottom: 14px }
.formField:last-of-type { margin-bottom: 0 }
.formField label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--ink) }
.formField .optional { font-weight: 400; color: var(--muted) }
.formField input, .formField textarea, .formField select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 14px; font-family: var(--font-body); background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
.formField input:focus, .formField textarea:focus, .formField select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}
.formField textarea { resize: vertical; min-height: 80px }
.formField select { cursor: pointer }

.formRow { display: flex; gap: 12px; margin-bottom: 14px }
.formFieldSmall { flex: 0 0 100px; margin-bottom: 0 }
.formFieldGrow { flex: 1; margin-bottom: 0 }

.phaseRow { align-items: flex-end }
.btnAddPhase {
  padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px dashed var(--line-2); background: var(--card); color: var(--gold-deep);
  font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.btnAddPhase:hover { background: var(--gold-soft); border-color: var(--gold) }

.charCount { font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px }

/* Actions */
.formActions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.formActions button { padding: 10px 18px; border-radius: var(--r-sm); border: none; cursor: pointer; font-weight: 600; font-size: 13px; transition: background .15s, transform .1s, filter .15s }
.formActions button:active { transform: scale(.97) }
.btnSubmit { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #201a08 }
.btnSubmit:hover { filter: brightness(1.04); box-shadow: 0 3px 12px rgba(196,148,47,.32) }
.btnSubmit:disabled { background: var(--line-2); color: var(--muted); cursor: not-allowed; filter: none; box-shadow: none }
.btnCancel { background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--line-2) }
.btnCancel:hover { background: var(--line) }

/* Deduction form amounts */
.deductionActions { justify-content: flex-start; border-top: none; padding-top: 0; margin-top: 14px }
.deductionActions .amountInput {
  width: 72px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 14px; text-align: center; font-family: var(--font-mono);
}
.deductionActions .amountInput:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft) }
.deductionActions .amountSep { color: var(--muted); font-weight: 600; align-self: center }
.deductionActions .btnCancel { margin-left: auto }

/* Add-answer button */
.btnAddAnswer {
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px dashed var(--gold-line); background: var(--card); color: var(--gold-deep);
  font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s;
}
.btnAddAnswer:hover { background: var(--gold-soft); border-color: var(--gold) }
.btnAddAnswerInline { padding: 4px 10px; font-size: 11px }
.answerFormWrap { margin-bottom: 12px; background: transparent; border: none; padding: 0; border-radius: 0 }

.answerFormInline { padding: 0 }
.answerFormRow { display: flex; gap: 10px; align-items: flex-start }
.answerInputWrap { flex: 1; min-width: 0 }
.answerInputWrap textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 14px; font-family: var(--font-body); resize: vertical; min-height: 60px;
}
.answerInputWrap textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft) }
.answerBtns { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0 }
.answerBtns button { padding: 8px 14px; border-radius: var(--r-sm); border: none; cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap }

/* Username prompt */
.usernamePrompt { text-align: center; padding: 16px }
.usernamePrompt p { margin: 0 0 12px; font-size: 14px; color: var(--ink) }
.usernamePrompt .usernameHint { font-size: 12px; color: var(--muted); margin-top: 8px }
.usernameForm { display: flex; gap: 8px; justify-content: center }
.usernameForm input {
  padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 14px; font-family: var(--font-body); width: 200px;
}
.usernameForm input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft) }

/* Contributor line (shared) */
.contributor-sep { margin: 10px 0 8px; border: none; border-top: 1px solid var(--line) }
.contributor { font-size: 12px; color: var(--muted); font-weight: 500 }
.contributor-name { color: var(--gold-deep); font-weight: 600 }

/* ---- G9a: the Awarded mark + the curator's award control -------------
   🛑 GOLD, AND DELIBERATELY NOT THE GREEN `.accepted-badge`. That badge
   (skill_sections.css:169, solid --good) is the QUESTION AUTHOR's own pick
   on an answer — a different concept from a G9 award, and all three of
   awarded / accepted / cited can be true of one row. Two marks in the same
   green would read as one mark rendered twice. Gold is the module's
   editorial colour (--gold-deep on --gold-soft is the X3-tuned pair, so the
   contrast is already measured); the star makes it legible without colour.
   ⚠️ There is no "Revoked" style on purpose — a revoked award renders
   nothing publicly (award_lib.php's awardMarkState() says why). */
.award-mark {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--gold-soft); color: var(--gold-deep);
  border: 1px solid var(--gold-line);
  font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: var(--r-pill); letter-spacing: .02em;
  white-space: nowrap; vertical-align: middle;
}
.award-mark-star { font-size: 11.5px; line-height: 1 }

.award-ctl { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; vertical-align: middle }
.award-btn {
  font-size: 11px; font-weight: 600; padding: 2px 9px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fff; color: var(--muted);
  transition: background .15s, border-color .15s, color .15s;
}
.award-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft) }
/* ⚠️ A disabled button is the STATE, not an error: "Award" is off because it is already
   awarded. It stays visible (never hidden) so the curator can see which way round it is. */
.award-btn:disabled { opacity: .45; cursor: default }
.award-say { font-size: 11px; color: var(--muted) }
.award-say--ok { color: var(--good) }
.award-say--bad { color: var(--bad) }

/* Responsive */
@media (max-width: 500px) {
  .formRow { flex-direction: column }
  .formFieldSmall { flex: none; width: 100% }
  .formActions { flex-direction: column }
  .formActions button { width: 100% }
  .answerFormRow { flex-direction: column }
  .answerBtns { flex-direction: row; width: 100% }
  .answerBtns button { flex: 1 }
}