/* ─────────────────────────────────────────────────────────────────
   css/library-publish.css
   Community Hub — Phase 1.3 publish CTA + scrub-and-confirm modal.

   Mirrors the visual language of /css/library.css: amber-filled
   primary action, cool-blue secondary tone for the row button (so
   "send to public hub" reads differently from amber "use this
   board now"), light surface for flag rows, and 44×44 tap targets
   on mobile.
   ───────────────────────────────────────────────────────────────── */

/* ── Per-row Publish button ──────────────────────────────────────
   Lives in .library-row-actions next to Load / Delete. Cool-blue
   outlined so it doesn't compete with amber Load (the primary
   in-row action). Same min-width as the other icon-buttons so the
   row stays visually balanced. */
.library-row-publish {
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: transparent;
  color: #2C7BE5;
  border: 1px solid rgba(44, 123, 229, 0.45);
  border-radius: 6px;
  cursor: pointer;
  min-width: 36px;
  line-height: 1.1;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.library-row-publish:hover {
  background: rgba(44, 123, 229, 0.08);
  border-color: #2C7BE5;
}
.library-row-publish:active { transform: translateY(0.5px); }
.library-row-publish:focus-visible {
  outline: 2px solid #2C7BE5;
  outline-offset: 2px;
}

/* ── Modal shell ─────────────────────────────────────────────────
   z-index sits above the Saved Boards modal so the publish flow
   layers on top while the parent list stays visible behind it.
   Saved Boards uses .library-overlay (default modal-overlay
   z-index); this one wins by one. */
.publish-overlay { z-index: 10025; }
.publish-modal { max-width: 520px; }

/* Body — vertical stack of meta rows, status banner, flag list. */
.publish-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.5rem 0 0.75rem;
}

/* Meta row (Board / Category) — label + value pair so a screen
   reader treats them as paired data. */
.publish-row.publish-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  background: var(--surface-soft, #FAF7F1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-sm, 8px);
}
.publish-meta-label {
  flex: 0 0 80px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted, #6B6B80);
}
.publish-meta-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--ink, #1A1A2E);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.publish-meta-note {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--ink-muted, #6B6B80);
  margin-left: 0.35rem;
}

/* ── Status banners ──────────────────────────────────────────────
   One row, color-coded by state: pending (amber), warn (amber-
   stronger, flags found), ok (green), error (red). All carry an
   emoji glyph as a non-color signal (color-blind safe). */
.publish-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent;
}
.publish-status-pending {
  color: #8a5a00;
  background: rgba(232, 168, 56, 0.10);
  border-color: rgba(232, 168, 56, 0.35);
}
.publish-status-warn {
  color: #8a5a00;
  background: rgba(232, 168, 56, 0.14);
  border-color: rgba(232, 168, 56, 0.50);
}
.publish-status-ok {
  color: #166534;
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.30);
}
.publish-status-error {
  color: #8a1f1f;
  background: rgba(178, 58, 72, 0.08);
  border-color: rgba(178, 58, 72, 0.35);
}

.publish-spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: publishSpin 0.8s linear infinite;
  display: inline-block;
}
@keyframes publishSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .publish-spinner { animation: none; }
}

/* ── Flag list ───────────────────────────────────────────────────
   Each flagged item is a stacked card: head row with location +
   field + reason, then the raw flagged value. Limited height with
   scroll so a board with many tiles doesn't push the confirm CTA
   off-screen. */
.publish-flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 38vh;
  overflow-y: auto;
  /* Inner scroll-shadow so the user sees there's more below. */
  background: linear-gradient(#fff 30%, rgba(255,255,255,0)) center top / 100% 16px no-repeat,
              linear-gradient(rgba(255,255,255,0), #fff 70%) center bottom / 100% 16px no-repeat,
              radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.10), transparent) center top / 100% 8px no-repeat,
              radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.10), transparent) center bottom / 100% 8px no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.publish-flag-row {
  padding: 0.5rem 0.65rem;
  background: var(--surface-soft, #FAF7F1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid rgba(232, 168, 56, 0.55);
  border-radius: var(--radius-sm, 8px);
}
.publish-flag-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--ink-muted, #6B6B80);
  margin-bottom: 0.15rem;
}
.publish-flag-loc {
  font-weight: 700;
  color: var(--ink, #1A1A2E);
}
.publish-flag-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
}
.publish-flag-reason {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a5a00;
  background: rgba(232, 168, 56, 0.16);
  border: 1px solid rgba(232, 168, 56, 0.45);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.publish-flag-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--ink, #1A1A2E);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  /* Preserve original value characters but allow wrap so long
     phone strings / addresses don't blow out the modal width. */
  word-break: break-word;
  white-space: pre-wrap;
}

.publish-empty-flags {
  font-size: 0.85rem;
  color: var(--ink-muted, #6B6B80);
  padding: 0.5rem 0;
}

/* ── Confirm CTA row ─────────────────────────────────────────────
   Single primary amber button. Cancel lives in the modal-actions
   footer (built by the modal shell), so this row only carries the
   forward path. Mirrors the Save-current-board CTA pattern. */
.publish-confirm-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}
.publish-confirm-btn {
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--amber, #E8A838);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.publish-confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232, 168, 56, 0.35);
}
.publish-confirm-btn:active { transform: translateY(0); }
.publish-confirm-btn:focus-visible {
  outline: 2px solid #E8A838;
  outline-offset: 2px;
}
.publish-confirm-help {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--ink-muted, #6B6B80);
  line-height: 1.45;
  text-align: right;
}

/* ── Mobile ──────────────────────────────────────────────────────
   On narrow phones, drop the meta-label column to a top line so the
   value gets full width, and stretch the confirm button. Saved
   Boards uses the same pattern at this breakpoint. */
@media (max-width: 480px) {
  .publish-modal { max-width: 100%; }
  .publish-row.publish-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }
  .publish-meta-label { flex: 0 0 auto; }
  .publish-meta-value { white-space: normal; overflow: visible; text-overflow: clip; }
  .publish-confirm-row { justify-content: stretch; }
  .publish-confirm-btn { width: 100%; }
  .publish-confirm-help { text-align: left; }
}