/* ============================================================
   pubplan-grid-v1.0.1.css (css unchanged from v1.0.0; renamed for version-matched self-load)
   INBXIFY — MNA Workstream C: multi-edition PubPlan grid (companion to JS)

   Self-loaded by pubplan-grid-v1.0.0.js. Must load AFTER
   title-admin-page-design-v1.4.x.css — references its --ix-* tokens,
   does NOT redefine :root. Component sizing vars are scoped to the
   grid root. Namespace: .ppg-*

   Layout: shared slot rows (left rail) × edition columns. One row =
   one shared slot; one column = one edition; one cell = that edition's
   asset in that slot. Banner-ad cells render full-width with the
   customer name beneath; banner rows lock to the tallest creative.

   Authored 2026-05-23 · supersedes pubplan-sequencer (single-column).
   ============================================================ */

[data-pp-grid-root]{
  --ppg-ed-w:236px; --ppg-rail-w:188px;
  display:block; font-family:'DM Sans',system-ui,sans-serif; font-size:13px;
  color:var(--ix-text-dark); line-height:1.4; padding-bottom:84px;
}

.ppg-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);}
.ppg-demo code{font-family:'DM Mono',monospace;font-size:11px;background:#fff;padding:1px 4px;border-radius:4px;border:1px solid var(--ix-border);}

/* issue header */
.ppg-issue{display:flex;align-items:center;gap:14px;background:var(--ix-teal);color:#eaf2f0;border-radius:11px;padding:13px 18px;margin-bottom:16px;}
.ppg-issue .ppg-code{font-size:20px;font-weight:700;letter-spacing:.01em;}
.ppg-issue .ppg-ttl{font-size:13px;color:#9fc0bb;}
.ppg-issue .ppg-meta{margin-left:auto;display:flex;gap:18px;font-size:11.5px;color:#8fb3ae;}
.ppg-issue .ppg-meta b{color:#d9e6e4;font-weight:600;display:block;font-size:13px;}

.ppg-legend{display:flex;gap:18px;align-items:center;margin:0 2px 12px;font-size:11px;color:var(--ix-text-light);flex-wrap:wrap;}
.ppg-legend .ppg-k{display:inline-flex;align-items:center;gap:6px;}
.ppg-legend .ppg-sw{width:14px;height:14px;border-radius:4px;}

/* grid */
.ppg-scroll{overflow-x:auto;padding-bottom:6px;}
.ppg-grid{min-width:max-content;}
.ppg-row{display:flex;align-items:stretch;}
.ppg-row+.ppg-row{margin-top:6px;}
.ppg-hrow{margin-bottom:6px;position:sticky;top:0;z-index:5;}

/* left rail */
.ppg-corner,.ppg-rail{width:var(--ppg-rail-w);flex:none;}
.ppg-corner{display:flex;align-items:flex-end;padding:0 10px 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ix-text-tiny);font-weight:600;}
.ppg-rail{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--ix-cream-warm);border:1px solid var(--ix-border);border-right:none;border-radius:9px 0 0 9px;}
.ppg-row:last-of-type .ppg-rail{border-radius:0 0 0 9px;}
.ppg-handle{cursor:grab;color:var(--ix-text-tiny);font-size:14px;letter-spacing:-2px;user-select:none;}
.ppg-handle:hover{color:var(--ix-text-mid);}
.ppg-pos{font-family:'DM Mono',monospace;font-size:11px;color:var(--ix-text-mid);background:#fff;border:1px solid var(--ix-border-soft);border-radius:5px;padding:2px 5px;min-width:30px;text-align:center;}
.ppg-row.ppg-changed .ppg-pos{color:var(--ix-gold);border-color:var(--ix-gold);background:var(--ix-gold-glow);}
.ppg-type{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:12px;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='9' height='6'><path d='M1 1l3.5 3.5L8 1' stroke='%235a6478' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>") no-repeat right 7px center;
  border:1px solid var(--ix-border-input);border-radius:6px;padding:4px 22px 4px 8px;cursor:pointer;flex:1;min-width:0;}
.ppg-type.ppg-changed-field{border-color:var(--ix-gold);box-shadow:0 0 0 2px var(--ix-gold-shadow);}

/* edition header */
.ppg-ehead{width:var(--ppg-ed-w);flex:none;padding:8px 9px;background:var(--ix-surface);border:1px solid var(--ix-border);border-left:none;display:flex;align-items:center;gap:6px;}
.ppg-ehead .ppg-ename{font-weight:700;font-size:12.5px;color:var(--ix-text-dark);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ppg-ehead .ppg-esub{font-size:9.5px;color:var(--ix-text-tiny);font-family:'DM Mono',monospace;}
.ppg-ehead .ppg-kebab{color:var(--ix-text-tiny);cursor:pointer;font-size:15px;line-height:1;}
.ppg-ehead .ppg-kebab:hover{color:var(--ix-text-mid);}

/* cell */
.ppg-cell{width:var(--ppg-ed-w);flex:none;border:1px solid var(--ix-border);border-left:none;background:#fff;padding:7px;}
.ppg-tile{height:100%;min-height:54px;border-radius:7px;border:1px solid var(--ix-border-soft);background:var(--ix-cream);display:flex;gap:7px;padding:6px;cursor:pointer;transition:border-color .12s,box-shadow .12s;position:relative;}
.ppg-tile:hover{border-color:var(--ix-blue-light);box-shadow:0 1px 6px rgba(30,42,58,.06);}
.ppg-tile.ppg-changed-field{border-color:var(--ix-gold);box-shadow:0 0 0 2px var(--ix-gold-shadow);}
.ppg-tile.ppg-sponsored{border-color:var(--ix-gold);background:var(--ix-gold-glow);}
.ppg-thumb{width:34px;height:34px;flex:none;border-radius:5px;background:linear-gradient(135deg,#c9d4f7,#9fb0ef);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;}
.ppg-tile.ppg-sponsored .ppg-thumb{background:linear-gradient(135deg,#e6d3a0,#c4a35a);}
.ppg-info{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;}
.ppg-nm{font-size:11px;font-weight:600;color:var(--ix-text-dark);line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.ppg-co{font-size:9.5px;color:var(--ix-text-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ppg-crown{position:absolute;top:4px;right:5px;font-size:10px;color:var(--ix-gold);}
.ppg-tile.ppg-empty{border-style:dashed;border-color:var(--ix-border-input);background:transparent;align-items:center;justify-content:center;color:var(--ix-text-tiny);font-style:italic;font-size:10.5px;}
.ppg-tile.ppg-empty:hover{border-color:var(--ix-blue);color:var(--ix-blue-deep);}

/* banner ad — full-width creative, customer name beneath; row locks to tallest */
.ppg-tile.ppg-banner{flex-direction:column;align-items:stretch;justify-content:center;gap:5px;}
.ppg-banner-img{width:100%;border-radius:5px;background:linear-gradient(135deg,#e6d3a0,#c4a35a);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.02em;position:relative;}
.ppg-banner-img .ppg-bsize{position:absolute;bottom:3px;right:5px;font-size:8px;opacity:.85;font-family:'DM Mono',monospace;font-weight:400;}
.ppg-tile.ppg-banner .ppg-info{text-align:center;align-items:center;}
.ppg-tile.ppg-banner .ppg-nm{font-size:11px;-webkit-line-clamp:1;}

/* add-edition column */
.ppg-addcol{width:46px;flex:none;display:flex;align-items:stretch;}
.ppg-addcol button{width:100%;border:1.5px dashed var(--ix-blue-light);background:var(--ix-blue-ghost);color:var(--ix-blue-deep);border-radius:8px;cursor:pointer;font-size:18px;font-weight:700;writing-mode:vertical-rl;text-orientation:mixed;padding:8px 0;}
.ppg-addcol button:hover{background:var(--ix-blue-glow);border-color:var(--ix-blue);}
.ppg-addcol.ppg-spacer{visibility:hidden;}

/* dragging */
.ppg-row.ppg-dragging{opacity:.4;}
.ppg-row.ppg-drop .ppg-rail{box-shadow:inset 0 2px 0 var(--ix-blue);}

.ppg-addblock{margin-top:10px;width:var(--ppg-rail-w);display:flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:12px;color:var(--ix-blue-deep);background:var(--ix-blue-ghost);border:1.5px dashed var(--ix-blue-light);border-radius:8px;padding:9px;cursor:pointer;}
.ppg-addblock:hover{background:var(--ix-blue-glow);border-color:var(--ix-blue);}

/* save bar */
.ppg-bar{position:fixed;left:0;right:0;bottom:0;background:rgba(253,252,249,.94);backdrop-filter:blur(8px);border-top:1px solid var(--ix-border);display:flex;align-items:center;gap:12px;padding:11px 26px;z-index:20;}
.ppg-status{font-size:12px;color:var(--ix-text-light);font-family:'DM Mono',monospace;margin-right:auto;}
.ppg-status b{color:var(--ix-gold);}
.ppg-btn{font-family:inherit;font-size:12.5px;font-weight:600;border-radius:7px;padding:8px 16px;cursor:pointer;border:1px solid transparent;}
.ppg-btn-primary{background:var(--ix-blue);color:#fff;}
.ppg-btn-primary:disabled{opacity:.5;cursor:default;}
.ppg-btn-ghost{background:transparent;color:var(--ix-text-mid);border-color:var(--ix-border-input);}
.ppg-btn-ghost:disabled{opacity:.5;cursor:default;}

.ppg-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;}
.ppg-payload .ppg-pk{color:var(--ix-gold-warm);}
.ppg-payload-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#7fa8a3;margin-bottom:7px;}

.ppg-toast{position:fixed;bottom:64px;right:26px;z-index:30;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);}
.ppg-toast.ppg-show{opacity:1;transform:translateY(0);}
.ppg-toast-ok{background:var(--ix-blue);}
.ppg-toast-err{background:#c0563f;}