/* ==========================================================================
   Passport Settings — the editor beside a live preview.

   Two columns on a wide screen so an Admin can see the consequence of a change
   at the moment they make it. Below 1200px they stack, editor first: on a
   narrow screen the preview is reference, not the work.
   ========================================================================== */
.ps-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1200px) { .ps-layout { grid-template-columns: minmax(0, 1fr); } }

.ps-scopebar { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ps-scope-note { flex: 1 1 320px; min-width: 260px; }
.ps-scope-note .rs-note, .ps-scope-note .rs-block { margin-bottom: 8px; }
.ps-scope-note > :last-child { margin-bottom: 0; }
.ps-scope-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* ---- tabs ---- */
.ps-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 10px 14px 0; border-bottom: 1px solid var(--border-subtle);
}
.ps-tab {
  padding: 9px 14px; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-tertiary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 7px;
}
.ps-tab:hover { color: var(--text-primary); }
.ps-tab.active { color: var(--accent-600); border-bottom-color: var(--accent-500); }

.ps-section-title {
  font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 18px 0 10px;
}
.ps-section-title:first-child { margin-top: 0; }

/* ---- toggles ---- */
.ps-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.ps-toggle {
  display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  font-size: 13px; background: var(--surface);
}
.ps-toggle:hover { border-color: var(--accent-200); }
.ps-toggle input { margin-top: 2px; }
.ps-toggle small { display: block; color: var(--text-tertiary); font-size: 11.5px; margin-top: 3px; line-height: 1.45; }
.ps-approve { margin-top: 12px; align-items: flex-start; }
.ps-approve.is-approved { border-color: var(--emerald-500); background: var(--emerald-50); }

/* ---- item tables ---- */
.ps-cat { margin-bottom: 20px; }
.ps-cat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-700); padding: 8px 0; margin-bottom: 4px;
}
.page-passport-settings .ps-items, .ps-items { min-width: 0; table-layout: auto; }
.ps-items thead th { white-space: normal; font-size: 10.5px; }
.ps-items tbody td { white-space: normal; padding: 5px 6px; vertical-align: middle; }
.ps-items .form-input { padding: 5px 8px; font-size: 12.5px; width: 100%; }
.ps-move { display: flex; flex-direction: column; gap: 1px; padding: 4px 2px; }

.ps-iconbtn {
  border: 1px solid var(--border-subtle); background: var(--surface);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 10px; line-height: 1;
  padding: 3px 5px; color: var(--text-tertiary); font-family: inherit;
}
.ps-iconbtn:hover { border-color: var(--accent-400); color: var(--accent-600); }
.ps-iconbtn.danger:hover { border-color: var(--red-500); color: var(--red-600); }

.ps-group {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 12px; margin-bottom: 14px; background: var(--surface);
}
.ps-group-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ps-group-name { flex: 1 1 auto; font-weight: 700; }

/* ---- preview ---- */
.ps-preview-panel { position: sticky; top: 16px; }
@media (max-width: 1200px) { .ps-preview-panel { position: static; } }
.ps-preview-stage {
  max-height: 70vh; overflow: auto; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 14px;
}
/* The A4 document is 194mm wide; the preview column is not. Scale it down to
   fit rather than making the operator scroll sideways to read their own edit. */
.ps-preview-stage .pp-doc { zoom: 0.62; }
.ps-preview-stage .pk-card { zoom: 0.95; }