/* ============================================================
   pubplan-sequencer-v1.0.2.css
   INBXIFY — MNA Workstream C / K-3 PubPlan sequencer (companion to JS)

   Self-loaded by pubplan-sequencer-v1.0.2.js (derives this URL from
   its own src and injects the <link> if absent). Must load AFTER
   title-admin-page-design-v1.4.x.css — it references the --ix-*
   design tokens defined there and does NOT redefine :root.

   Namespace: .pps-*  ·  Dirty state uses --ix-changed-border (gold),
   matching the standing editing-state UX rule and the ix-form-controls
   `--changed` convention.

   v1.0.2 (K-3): NO functional change from v1.0.1. The A-lock editing-state
   UX is already satisfied here — a changed <select> gets the gold border +
   ring via .pps-select.pps-changed-field (below), persistent selection is
   inherent to the JS re-render, and the inline Revert link shows the moment
   a row goes dirty (.pps-card.pps-changed .pps-revert). Version bumped only
   to keep the matched pair in lockstep (hard rule: never reuse a filename).

   Authored 2026-05-22 (C-1) · K-3 loose-typing pass 2026-06-08.
   ============================================================ */

[data-pp-sequencer-root] {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ix-text-dark);
  line-height: 1.4;
  display: block;
  padding-bottom: 64px; /* clear the fixed save bar */
}

/* demo banner (only when NL-BLOCKS wrapper isn't wired yet) */
.pps-demo {
  background: var(--ix-gold-glow);
  border: 1px solid var(--ix-gold);
  border-left: 3px solid var(--ix-gold);
  border-radius: 7px;
  padding: 9px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--ix-text-mid);
}
.pps-demo code {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  background: #fff;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid var(--ix-border);
}

/* ---- list + cards (compact) ---- */
.pps-list { display: flex; flex-direction: column; gap: 7px; }

.pps-card {
  position: relative;
  display: grid;
  grid-template-columns: 20px 38px 1fr auto;
  align-items: center;
  gap: 10px;
  background: var(--ix-surface);
  border: 1px solid var(--ix-border);
  border-radius: 8px;
  padding: 7px 11px;
  transition: box-shadow .14s, border-color .14s, opacity .12s;
}
.pps-card:hover { box-shadow: 0 1px 7px rgba(30,42,58,.05); }
.pps-card.pps-changed { border-color: var(--ix-changed-border); box-shadow: 0 0 0 2px var(--ix-gold-shadow); }
.pps-card.pps-dragging { opacity: .4; }
.pps-card.pps-drop { border-color: var(--ix-blue-light); box-shadow: 0 0 0 2px var(--ix-blue-shadow); }

.pps-handle {
  cursor: grab; color: var(--ix-text-tiny); font-size: 15px; line-height: 1;
  text-align: center; user-select: none; letter-spacing: -2px;
}
.pps-handle:active { cursor: grabbing; }
.pps-handle:hover { color: var(--ix-text-mid); }

.pps-pos {
  font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500;
  color: var(--ix-text-mid); background: var(--ix-cream-warm);
  border: 1px solid var(--ix-border-soft); border-radius: 6px;
  padding: 3px 0; text-align: center;
}
.pps-card.pps-changed .pps-pos {
  color: var(--ix-gold); border-color: var(--ix-gold); background: var(--ix-gold-glow);
}

.pps-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pps-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

.pps-select {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ix-text-dark);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%235a6478' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 9px center;
  border: 1px solid var(--ix-border-input); border-radius: 6px;
  padding: 5px 26px 5px 9px; cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.pps-select:focus { outline: none; border-color: var(--ix-blue); box-shadow: 0 0 0 2px var(--ix-blue-shadow); }
.pps-select.pps-changed-field { border-color: var(--ix-changed-border); box-shadow: 0 0 0 2px var(--ix-gold-shadow); }

.pps-asset {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ix-text-mid); background: #fff;
  border: 1px dashed var(--ix-border-input); border-radius: 6px;
  padding: 5px 9px; cursor: pointer; max-width: 230px;
  transition: border-color .14s, color .14s, background .14s;
}
.pps-asset:hover { border-color: var(--ix-blue-light); color: var(--ix-blue-deep); }
.pps-asset.pps-filled {
  border-style: solid; color: var(--ix-text-dark); font-weight: 600;
  background: var(--ix-blue-ghost); border-color: var(--ix-blue-light);
}
.pps-asset .pps-ph { color: var(--ix-text-tiny); font-style: italic; font-weight: 400; }
.pps-asset.pps-changed-field { border-color: var(--ix-changed-border); box-shadow: 0 0 0 2px var(--ix-gold-shadow); }

.pps-sponsor { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ix-text-light); user-select: none; cursor: pointer; }
.pps-switch {
  position: relative; width: 30px; height: 17px; border-radius: 999px;
  background: var(--ix-cream-deep); border: 1px solid var(--ix-border-input);
  transition: background .14s; flex: none;
}
.pps-switch::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: left .14s;
}
.pps-sponsor.pps-on .pps-switch { background: var(--ix-gold); border-color: var(--ix-gold); }
.pps-sponsor.pps-on .pps-switch::after { left: 14px; }
.pps-sponsor.pps-on .pps-lbl { color: var(--ix-gold); font-weight: 600; }

/* planning note */
.pps-note-wrap { display: flex; align-items: center; gap: 6px; }
.pps-note-ico { color: var(--ix-text-tiny); font-size: 11px; flex: none; }
.pps-note {
  flex: 1; min-width: 120px; font-family: inherit; font-size: 11.5px; color: var(--ix-text-mid);
  background: transparent; border: 0; border-bottom: 1px dashed var(--ix-border-input);
  padding: 2px; transition: border-color .14s, color .14s;
}
.pps-note::placeholder { color: var(--ix-text-tiny); font-style: italic; }
.pps-note:focus { outline: none; border-bottom-color: var(--ix-blue); color: var(--ix-text-dark); }
.pps-note.pps-changed-field { border-bottom-style: solid; border-bottom-color: var(--ix-changed-border); color: var(--ix-text-dark); }
.pps-count { font-size: 9.5px; font-family: 'DM Mono', monospace; color: var(--ix-text-tiny); flex: none; width: 34px; text-align: right; }
.pps-count.pps-warn { color: var(--ix-gold); }

.pps-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; align-self: flex-start; padding-top: 2px; }
.pps-write { font-size: 9.5px; font-family: 'DM Mono', monospace; color: var(--ix-gold); visibility: hidden; }
.pps-card.pps-changed .pps-write { visibility: visible; }
.pps-revert {
  font-size: 10.5px; color: var(--ix-text-light); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; padding: 0; font-family: inherit; visibility: hidden;
}
.pps-revert:hover { color: var(--ix-gold); }
.pps-card.pps-changed .pps-revert { visibility: visible; }
.pps-kebab { color: var(--ix-text-tiny); font-size: 15px; cursor: pointer; line-height: 1; padding: 0 2px; }
.pps-kebab:hover { color: var(--ix-text-mid); }

/* add block */
.pps-add {
  margin-top: 9px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ix-blue-deep);
  background: var(--ix-blue-ghost); border: 1.5px dashed var(--ix-blue-light); border-radius: 8px;
  padding: 10px; cursor: pointer; transition: background .14s, border-color .14s;
}
.pps-add:hover { background: var(--ix-blue-glow); border-color: var(--ix-blue); }

/* save bar */
.pps-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(253,252,249,.94); backdrop-filter: blur(8px);
  border-top: 1px solid var(--ix-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 11px 26px;
}
.pps-status { font-size: 12px; color: var(--ix-text-light); margin-right: auto; font-family: 'DM Mono', monospace; }
.pps-status b { color: var(--ix-gold); }

/* stubbed payload log */
.pps-payload {
  margin: 14px 0 0; font-family: 'DM Mono', monospace; font-size: 11px;
  background: var(--ix-teal); color: #cfe3e0; border-radius: 9px;
  padding: 13px 15px; white-space: pre-wrap; display: none; line-height: 1.55;
}
.pps-payload .pps-k { color: var(--ix-gold-warm); }
.pps-payload-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #7fa8a3; margin-bottom: 7px; }

/* toast (async-action feedback) */
.pps-toast {
  position: fixed; bottom: 68px; right: 26px; z-index: 30;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 9px 15px; border-radius: 8px; color: #fff;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
  box-shadow: 0 4px 16px rgba(30,42,58,.18);
}
.pps-toast-show { opacity: 1; transform: translateY(0); }
.pps-toast-ok { background: var(--ix-blue); }
.pps-toast-err { background: #c0563f; }