/* =============================================================
   corrections.css - the user-correction plugin.

   Loaded from index-shell.php ONLY when the plugin is enabled
   (includes/corrections/corrections-lib.php -> ata_corrections_enabled()),
   so a disabled plugin costs the browser nothing.

   VISUAL CONTRACT: this modal is a sibling of the public merch upload
   modal (includes/tools/merchupload/public_upload_modal.php) and copies
   its look deliberately - same overlay, same #1a1a1a card and #333
   border, same slide-in, same two-column grid, same #2a2a2a/#444 inputs,
   same green submit. Both use a fixed dark palette rather than theme
   tokens, so the form reads the same on all nine themes.

   The rules are DUPLICATED rather than shared because the merch modal
   ships its CSS inline on three gallery pages, while this one ships in
   the shell on every page and must still look right when the merch modal
   is not present at all. Change one, consider the other.

   Colour roles (borrowed from the merch modal):
     #ffc107  amber - reference information you cannot edit
                      (there: the filename preview. here: the current value)
     #28a745  green - what will actually be sent (changed rows + submit)
     #007bff  blue  - focus, badges
     #ff4d4d  red   - danger

   Two consumers:
     .lb-correct   the "Suggest a correction" link in the lightbox chrome
     .corr-*       the modal
   ============================================================= */

/* ── The lightbox link ─────────────────────────────────────────────────── */
/* Sits in .lb-details beside the caption. js/lightbox.js sets display
   directly (not a class) so the link stays hidden even if this stylesheet
   is absent. Theme tokens here on purpose: it lives in the lightbox chrome,
   which IS themed, unlike the modal. */

.lb-correct {
  display: inline-block;
  margin-top: var(--padding-sm);
  font-size: var(--font-sm);
  color: var(--link-colour);
  text-decoration: underline;
  cursor: pointer;
}

.lb-correct:hover,
.lb-correct:focus-visible {
  color: var(--link-colour_hover);
}

/* ── The page strip ────────────────────────────────────────────────────── */
/* Rendered once by includes/corrections/page-correct-bar.php at the bottom of
   #main, below all galleries. Theme tokens for the same reason .lb-correct uses
   them: this sits in the themed page chrome, not inside the modal's fixed dark
   palette. Its left offset is NOT set here - css/style.css adds .page-correct to
   the four .releases rules so the two share one set of breakpoint values. */

.page-correct {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--padding-sm);
  margin-top: var(--padding-2xl);
  /* Clears the fixed .footer sliver pinned to the bottom of the viewport. */
  margin-bottom: var(--padding-2xl);
  /* Full shorthand, not padding-top: style.css sets "padding: 0 var(--padding-lg)"
     on the shared .releases/.page-correct rule at four breakpoints, and this file
     loads after it. Declaring the whole property means the result does not depend on
     which half of a shorthand won. The horizontal value matches that rule. */
  text-align: center;
}

.page-correct[hidden] {
  display: none;
}

.page-correct-lead {
  font-family: var(--font-body);
  font-size: var(--font-sm);
  color: var(--font-colour_grey);
}

.page-correct-btn {
  font-family: var(--font-body);
  font-size: var(--font-sm);
  color: var(--link-colour);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

.page-correct-btn:hover,
.page-correct-btn:focus-visible {
  color: var(--link-colour_hover);
}

.page-correct-btn:focus-visible {
  outline: 2px solid var(--link-colour);
  outline-offset: 2px;
}

/* ── Modal shell ───────────────────────────────────────────────────────── */

.corr-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-correct-modal);
  justify-content: center;
  align-items: flex-start;
  padding: 30px 15px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.corr-modal-overlay.open {
  display: flex;
}

.corr-modal-box {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  width: 100%;
  max-width: 900px;
  position: relative;
  margin: auto;
  animation: corrSlideIn 0.25s ease-out;
}

@keyframes corrSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.corr-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #888;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  padding: 0;
  transition: color 0.2s;
}

.corr-modal-close:hover,
.corr-modal-close:focus-visible {
  color: #fff;
}

/* ── Form chrome ───────────────────────────────────────────────────────── */

.corr-form-container {
  padding: 25px 30px 30px;
}

.corr-form-title {
  color: #fff;
  text-align: center;
  margin: 0 0 20px;
  font-size: 1.4em;
  font-family: 'Amaranth', sans-serif;
}

.corr-cat-badge {
  display: inline-block;
  background: #007bff;
  color: #fff;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 0.7em;
  font-variant: normal;
  margin-left: 8px;
  vertical-align: middle;
}

.corr-cat-badge:empty {
  display: none;
}

.corr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.corr-form-row {
  margin-bottom: 16px;
}

.corr-form-row label {
  display: block;
  margin-bottom: 6px;
  color: #999;
  font-weight: bold;
  font-size: 0.85em;
}

.corr-form-row input,
.corr-form-row select,
.corr-form-row textarea {
  width: 100%;
  padding: 9px 10px;
  background: #2a2a2a;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.95em;
}

.corr-form-row textarea {
  resize: vertical;
}

.corr-form-row input:focus,
.corr-form-row textarea:focus {
  border-color: #007bff;
  outline: none;
}

.corr-optional {
  font-weight: normal;
  color: #666;
  font-size: 0.85em;
}

/* ── The item being corrected ──────────────────────────────────────────── */

.corr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 20px;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
}

.corr-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid #444;
  border-radius: 4px;
  background: #000;
}

.corr-thumb[hidden] {
  display: none;
}

.corr-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.corr-item-title {
  color: #fff;
  font-size: 1em;
  word-break: break-word;
}

.corr-item-key {
  color: #666;
  font-family: monospace;
  font-size: 0.78em;
  word-break: break-all;
}

.corr-intro {
  color: #888;
  font-size: 0.82em;
  font-style: italic;
  margin: 0 0 16px;
  line-height: 1.5;
}

.corr-loading {
  padding: 40px 0;
  text-align: center;
  color: #888;
}

.corr-loading[hidden] {
  display: none;
}

/* ── Field rows: amber "currently", editable input below ───────────────── */
/* The amber treatment is lifted straight from the merch modal's filename
   preview box - in both places it means "reference, not editable". */

.corr-field {
  margin-bottom: 18px;
}

.corr-now-box {
  background: #000;
  border: 1px solid #ffc107;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.corr-now-box .corr-now-label {
  display: block;
  color: #888;
  font-size: 0.72em;
  font-weight: bold;
  margin: 0;
}

.corr-now-box .corr-now {
  color: #ffc107;
  font-size: 0.95em;
  display: block;
  margin-top: 2px;
  word-break: break-word;
}

.corr-now-box .corr-now.is-empty {
  color: #666;
  font-style: italic;
}

/* Green = this is what will actually be sent. Same green as the submit
   button, so the two read as one promise. */
.corr-field.is-changed .corr-input,
.corr-field.is-changed .corr-input:focus {
  border-color: #28a745;
  background: #1e2a20;
}

.corr-badge {
  display: none;
  float: right;
  background: #28a745;
  color: #fff;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.corr-field.is-changed .corr-badge {
  display: inline-block;
}

.corr-hint {
  display: block;
  font-size: 0.75em;
  color: #888;
  margin-top: 4px;
  font-style: italic;
}

/* ── Tag autocomplete ──────────────────────────────────────────────────── */
/* Same dropdown as the merch upload modal's .pub-ac-* tag picker: it completes
   the last comma-separated segment only. */

.corr-ac-wrap {
  position: relative;
}

.corr-ac-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #2a2a2a;
  border: 1px solid #444;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 160px;
  overflow-y: auto;
  z-index: 1000;
}

.corr-ac-drop.open {
  display: block;
}

.corr-ac-item {
  padding: 7px 10px;
  cursor: pointer;
  font-size: 0.85em;
  border-bottom: 1px solid #333;
}

.corr-ac-item:hover,
.corr-ac-item.is-active {
  background: #333;
  color: #007bff;
}

.corr-ac-match {
  color: #007bff;
  font-weight: bold;
}

/* ── The optional photo ────────────────────────────────────────────────── */
/* Preview treatment copied from the merch modal's .pub-img-preview so an
   attached image looks the same in both places. */

.corr-img-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.corr-img-preview .corr-pw {
  position: relative;
  display: inline-block;
}

.corr-img-preview img {
  width: 140px;
  height: auto;
  border: 2px solid #444;
  border-radius: 4px;
  background: #000;
  display: block;
}

.corr-img-preview .corr-rm {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff4d4d;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  padding: 0;
}

.corr-img-preview .corr-rm:hover {
  background: #ff0000;
}

/* Only appears once a photo is attached, because that is the moment the name
   field stops being private. Amber = pay attention, same as elsewhere. */
.corr-name-warning {
  margin: 0 0 12px;
  padding: 8px 10px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid #ffc107;
  border-radius: 4px;
  color: #ffc107;
  font-size: 0.78em;
  line-height: 1.5;
}

.corr-name-warning[hidden] {
  display: none;
}

/* Honeypot. Kept in the layout but out of sight and out of the tab order -
   display:none is skipped by some bots, an off-screen field is not. */
.corr-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Send ──────────────────────────────────────────────────────────────── */

.corr-privacy {
  font-size: 0.75em;
  color: #888;
  margin: 0 0 12px;
  font-style: italic;
  line-height: 1.5;
}

.corr-submit-btn {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 14px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
  width: 100%;
  margin-top: 8px;
  font-family: inherit;
  transition: background 0.2s;
}

.corr-submit-btn:hover {
  background: #218838;
}

.corr-submit-btn:disabled {
  background: #444;
  cursor: not-allowed;
  opacity: 0.6;
}

.corr-remaining {
  text-align: center;
  color: #888;
  font-size: 0.85em;
  margin-top: 10px;
}

.corr-msg {
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 16px;
  text-align: center;
  font-weight: bold;
  display: none;
}

.corr-msg.success {
  background: #d4edda;
  color: #155724;
  display: block;
}

.corr-msg.error {
  background: #f8d7da;
  color: #721c24;
  display: block;
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
/* 700px is the merch modal's own breakpoint; the two collapse together. */

@media (max-width: 700px) {
  .corr-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .corr-form-container {
    padding: 20px 15px;
  }

  .corr-modal-overlay {
    padding: 15px 8px;
  }
}