/**
 * Reorganisation state surfaces — Phase 4 of reorg-engine-alignment plan.
 *
 * Three surfaces:
 *   - blocked-classifier-modal    (state=blocked → inline wine classifier)
 *   - setup-tasks-modal           (state=setup_needed → structural tasks)
 *   - reorg-preview               (existing IMPROVED_PLAN modal; AI panel + gating)
 */

/* ────────────────────────────────────────────────────────────────────
 * Shared layout primitives — both new surfaces use the base .modal +
 * .modal-overlay shell and only add their own content density.
 * ──────────────────────────────────────────────────────────────────── */

.blocked-classifier-modal,
.setup-tasks-modal,
.reorg-preview-modal {
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.blocked-classifier-body,
.setup-tasks-body,
.reorg-preview-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.blocked-classifier-footer,
.setup-tasks-footer,
.reorg-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

/* ────────────────────────────────────────────────────────────────────
 * Blocked classifier surface
 * ──────────────────────────────────────────────────────────────────── */

.blocked-classifier-intro {
  margin: 0 0 0.75rem;
  color: var(--color-fg-muted, #4b5563);
}

.blocked-classifier-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blocked-classifier-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-md);
  align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.4rem;
  background: var(--color-bg-elevated, #fafafa);
}

.blocked-classifier-row__name strong {
  display: block;
  font-size: 0.95rem;
}

.blocked-classifier-row__vintage {
  color: var(--color-fg-muted, #6b7280);
  font-size: 0.85rem;
}

.blocked-classifier-row__inputs {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.blocked-classifier-row__field {
  display: contents; /* the inner label is just for a11y */
}

.blocked-classifier-row__colour,
.blocked-classifier-row__grapes {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 0.3rem;
  font: inherit;
}

.blocked-classifier-row__colour { min-width: 6.5em; }
.blocked-classifier-row__grapes { min-width: 14em; }

.blocked-classifier-empty {
  text-align: center;
  padding: 2rem 1rem;
}

.blocked-classifier-empty h3 {
  margin: 0 0 0.4rem;
  color: var(--color-ok, rgb(22, 101, 52));
}

.blocked-classifier-progress {
  font-size: 0.85rem;
  color: var(--color-fg-muted, #6b7280);
}

/* Mobile — collapse to two rows per wine */
@media (max-width: 560px) {
  .blocked-classifier-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .blocked-classifier-row__inputs {
    grid-column: 1 / 3;
    flex-wrap: wrap;
  }
}

/* ────────────────────────────────────────────────────────────────────
 * Setup-tasks surface
 * ──────────────────────────────────────────────────────────────────── */

.setup-tasks-intro {
  margin: 0 0 0.75rem;
  color: var(--color-fg-muted, #4b5563);
}

.setup-tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.setup-tasks-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.4rem;
  background: var(--color-bg-elevated, #fafafa);
}

.setup-tasks-row__label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.setup-tasks-row__kind {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted, #6b7280);
}

.setup-tasks-row__detail {
  font-size: 0.95rem;
}

.setup-tasks-row__non-executable {
  color: var(--color-fg-muted, #6b7280);
  font-style: italic;
  font-size: 0.85rem;
}

.setup-tasks-empty {
  text-align: center;
  padding: 2rem 1rem;
}

.setup-tasks-progress {
  font-size: 0.85rem;
  color: var(--color-fg-muted, #6b7280);
}

/* ────────────────────────────────────────────────────────────────────
 * Reorg preview — AI review panel + NO_PLAN_NEEDED display
 * ──────────────────────────────────────────────────────────────────── */

.reorg-preview-ai {
  margin: 0.75rem 0;
  padding: 0.75rem 0.9rem;
  border-radius: 0.4rem;
  border: 1px solid;
}

.reorg-preview-ai--flag {
  background: rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.5);
  color: rgb(120, 53, 15);
}

.reorg-preview-ai--reject {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.5);
  color: rgb(127, 29, 29);
}

.reorg-preview-ai__heading {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.reorg-preview-ai__summary {
  margin: 0 0 0.4rem;
}

.reorg-preview-ai__concerns {
  margin: 0;
  padding-left: 1.2rem;
}

.reorg-preview-ai__concerns li {
  margin: 0.25rem 0;
  font-size: 0.9rem;
}

.reorg-preview-no-plan {
  text-align: center;
  padding: 2.5rem 1rem;
}

.reorg-preview-no-plan h3 {
  margin: 0 0 0.4rem;
  color: var(--color-ok, rgb(22, 101, 52));
}

/* Apply button disabled state — visible to the user */
.reorg-preview-footer .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ────────────────────────────────────────────────────────────────────
 * Composition-adaptive zoning (Cluster C / Phase 5)
 *   - needs-review-banner          (pinned top-of-grid affordance strip)
 *   - needs-review-modal           (virtual review overlay + assistive cards)
 *   - organisation-plan-modal      (axis preview + override)
 * All token-based; the overlays reuse the base .modal + .modal-overlay shell.
 * ──────────────────────────────────────────────────────────────────── */

.needs-review-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem);
  margin: 0 0 0.75rem;
}

.needs-review-banner__region {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-warning, #ff9800);
  background: var(--color-warning-bg, rgba(255, 152, 0, 0.12));
  border-radius: 0.5rem;
}

.needs-review-banner__count {
  font-size: 0.9rem;
  color: var(--color-fg-muted, #4b5563);
}

/* Review overlay */
.needs-review-modal {
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.needs-review-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
}

.needs-review-count {
  padding: 0.5rem 1.25rem 0;
  font-size: 0.9rem;
  color: var(--color-fg-muted, #4b5563);
}

.needs-review-card {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
}

.needs-review-card.is-selected {
  border-color: var(--accent, #d4a843);
  box-shadow: 0 0 0 1px var(--accent, #d4a843);
}

/* The per-card checkbox sits inline at the start of the head row. */
.needs-review-card__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.needs-review-card__select {
  align-self: center;
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  flex: 0 0 auto;
}

/* Bulk toolbar — sticky above the cards (the body is the scroll container). */
.needs-review-bulk {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: 0.4rem 0;
  margin-bottom: var(--space-sm, 0.5rem);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  background: var(--bg-card);
}
.needs-review-bulk__all {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-fg-muted, #4b5563);
}
.needs-review-bulk__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.25rem);
  margin-left: auto;
}
.needs-review-bulk__count {
  font-size: 0.85rem;
  font-weight: 600;
}

.needs-review-card__missing {
  color: var(--color-fg-muted, #4b5563);
}

.needs-review-card__loading,
.needs-review-card__error {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-fg-muted, #4b5563);
}

.needs-review-card__suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.suggestion-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  background: var(--surface-subtle, #f9fafb);
  border-radius: 0.4rem;
}

.suggestion-card__value { font-weight: 600; }

.suggestion-card__confidence { font-size: 0.85rem; color: var(--color-fg-muted, #4b5563); }
.suggestion-card__confidence--high { color: var(--color-ok, rgb(22, 101, 52)); }
.suggestion-card__confidence--low { color: var(--color-warning-accent, #8a5800); }

.suggestion-card__why { font-size: 0.85rem; color: var(--color-fg-muted, #4b5563); }

/* admit-new region candidate — a region not yet in the reference data. A subtle
   accent border distinguishes "grow the corpus" from a plain canonical value. */
.suggestion-card--admit {
  border-left: 3px solid var(--color-accent, #7c3aed);
  background: var(--surface-subtle, #f9fafb);
}

.suggestion-card .btn { margin-left: auto; }

/* colour clarify (Phase 2(b) clarify-don't-assert) — a label-silent colour the
   user must confirm. An amber accent signals "needs your input" (vs the plain
   value path). The guess is a hint, never a pre-selection. */
.suggestion-card--clarify {
  border-left: 3px solid var(--color-warning-accent, #8a5800);
}
.suggestion-card__hint {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-fg-muted, #4b5563);
}
/* the one-tap binary choices sit together (override the single-button right-push) */
.suggestion-card__choices {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}
.suggestion-card__choices .btn { margin-left: 0; }
.suggestion-card__clarify-other {
  flex-basis: 100%;
  font-size: 0.85rem;
}
.suggestion-card__clarify-other > summary {
  cursor: pointer;
  color: var(--color-fg-muted, #4b5563);
}

.needs-review-card__manual {
  min-width: 12rem;
  margin-right: 0.4rem;
}

.needs-review-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--color-ok, rgb(22, 101, 52));
}

/* Organisation-plan panel */
.organisation-plan-modal {
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.organisation-plan-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 0.75rem);
}

.organisation-plan-reason {
  margin: 0;
  color: var(--color-fg-muted, #4b5563);
}

.organisation-plan-axes {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
  margin: 0;
}

.organisation-plan-axis-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-sm, 0.5rem);
}

.organisation-plan-axis-label { font-weight: 600; }

.organisation-plan-axis-hint {
  grid-column: 2;
  font-size: 0.85rem;
  color: var(--color-fg-muted, #4b5563);
}

.organisation-plan-preview-list {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
}

.organisation-plan-preview-zone { margin: 0.2rem 0; }

.organisation-plan-preview--empty,
.organisation-plan-preview-more {
  color: var(--color-fg-muted, #4b5563);
  font-size: 0.9rem;
}

/* ── Ingest verification card (verification-at-ingest) ───────────────────── */
.ingest-verification-mount[hidden] { display: none; }

.verification-card {
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-warning-border, #f0c36d);
  border-left-width: 3px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-warning-bg, #fef9ee);
}

.verification-card__title {
  margin: 0 0 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text, #1f2937);
}

.verification-finding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: 0.3rem 0;
}

.verification-finding + .verification-finding {
  border-top: 1px solid var(--color-border-subtle, #eee);
}

.verification-finding__msg { flex: 1 1 12rem; font-size: 0.88rem; }

.verification-finding__actions {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.verification-finding--error { border-left: 3px solid var(--color-danger, #c0392b); padding-left: 0.4rem; }