/* ============================================================
   SOP LIBRARY — styles (restyled to command-center glass/ClickUp)
   Scoped under .ppm-sop-lib. Inherits CC light/dark tokens.
   NO full-bleed breakout (renders inside #content).
   ============================================================ */
.ppm-sop-lib {
  /* brand red is the single accent here too (was purple) */
  --sop: var(--accent); --sop-dark: var(--accent-strong); --sop-soft: var(--text-2); --sop-faint: var(--text-3);
  --sop-good:#1f9d57; --sop-warn:#86868b; --sop-bad:#e5484d; --sop-hero:#0B0B0E; --sop-hero2:#121014;
  color: var(--text); font-family: var(--font); position: relative;
}
[data-theme="dark"] .ppm-sop-lib { --sop: var(--accent); --sop-dark:var(--accent-strong); }
.ppm-sop-lib *, .ppm-sop-lib *::before, .ppm-sop-lib *::after { box-sizing: border-box; }
.ppm-sop-lib h1,.ppm-sop-lib h2,.ppm-sop-lib h3 { margin:0; }
.ppm-sop-lib p { margin:0; }

/* ---- top bar ---- */
.ppm-sop-lib-topbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-right:4px; }
.ppm-sop-lib-searchbtn { flex:1; display:flex; align-items:center; gap:10px; padding:10px 14px; min-height:44px; border-radius:12px; border:1px solid var(--hairline); background:var(--surface); color:var(--text-3); cursor:pointer; font-family:var(--font); font-size:13.5px; transition:all .16s ease; min-width:0; }
.ppm-sop-lib-searchbtn:hover { background:var(--glass-strong); border-color:var(--hairline-strong); }
.ppm-sop-lib-searchbtn svg { width:16px; height:16px; flex-shrink:0; }
.ppm-sop-lib-searchbtn span { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ppm-sop-lib-searchbtn kbd { font-family:var(--font); font-size:11px; font-weight:600; padding:3px 7px; border-radius:6px; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-3); }
.sop-status { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:10px; font-size:12px; font-weight:600; border:1px solid var(--hairline); background:var(--surface); white-space:nowrap; }
.sop-statusdot { width:8px; height:8px; border-radius:50%; background:var(--text-3); }
.sop-status.sop-local { color:var(--text-2); } .sop-local .sop-statusdot { background:var(--accent); }
.sop-status.sop-online { color:var(--green); } .sop-online .sop-statusdot { background:var(--green); box-shadow:0 0 0 3px var(--green-bg); }
.sop-status.sop-offline { color:var(--orange); } .sop-offline .sop-statusdot { background:var(--orange); }
.sop-status.sop-checking { color:var(--text-3); }
.ppm-sop-lib-editbtn { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; min-height:44px; border-radius:11px; border:1px solid var(--hairline); background:var(--surface); color:var(--text); font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; transition:all .16s ease; }
.ppm-sop-lib-editbtn svg { width:15px; height:15px; }
.ppm-sop-lib-editbtn:hover { background:var(--glass-strong); }
.ppm-sop-lib-editbtn.ppm-on { background:var(--sop); color:#fff; border-color:var(--sop); }

/* ---- layout (full-width; nav lives up top, no side rail) ---- */
.ppm-sop-lib-body { display:block; }
.ppm-sop-lib-main { width:100%; min-width:0; }

/* ---- top nav bar (horizontal) ---- */
.ppm-sop-lib-topnav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--hairline); }
.ppm-sop-lib-topnav-item { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; min-height:44px; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text-2); background:transparent; border:1px solid transparent; font-family:var(--font); transition:all .14s ease; }
.ppm-sop-lib-topnav-item:hover { background:var(--row-hover); color:var(--text); }
.ppm-sop-lib-topnav-item.ppm-on { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); }
.ppm-sop-lib-nav-ic { display:inline-flex; }
.ppm-sop-lib-nav-ic svg { width:16px; height:16px; }
.ppm-sop-lib-nav-count { font-size:11px; font-weight:700; color:var(--text-3); background:var(--surface-2); padding:1px 8px; border-radius:20px; }
.ppm-sop-lib-topnav-item.ppm-on .ppm-sop-lib-nav-count { color:var(--accent); background:var(--accent-soft); }
.ppm-sop-lib-mono2 { font-size:9.5px; font-weight:800; padding:2px 5px; border-radius:5px; background:var(--surface-2); color:var(--text-3); letter-spacing:.02em; }

/* ---- role picker (CEO/director Role Trainings) ---- */
.ppm-sop-lib-rolepick { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.ppm-sop-lib-rolepick-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; min-height:44px; border-radius:10px; border:1px solid var(--hairline); background:var(--surface); color:var(--text-2); font-size:12.5px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all .14s ease; }
.ppm-sop-lib-rolepick-btn:hover { background:var(--glass-strong); color:var(--text); }
.ppm-sop-lib-rolepick-btn.ppm-on { background:var(--sop); color:#fff; border-color:var(--sop); }
.ppm-sop-lib-rolepick-btn.ppm-on .ppm-sop-lib-mono2 { background:rgba(255,255,255,.2); color:#fff; }

/* ---- status line (CEO bootcamp-complete badge) ---- */
.ppm-sop-lib-statusline { margin-bottom:14px; }
.ppm-sop-lib-okbadge { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:10px; font-size:13px; font-weight:700; color:var(--green); background:var(--green-bg); border:1px solid var(--hairline); }
.ppm-sop-lib-okbadge svg { width:15px; height:15px; }

/* ---- empty state (no ramp-up assigned) ---- */
.ppm-sop-lib-emptystate { display:flex; flex-direction:column; align-items:center; gap:12px; padding:44px 20px; text-align:center; color:var(--text-3); font-size:14px; font-weight:500; border:1px solid var(--glass-border); border-radius:var(--radius-md); background:var(--glass); }
.ppm-sop-lib-emptystate svg { width:34px; height:34px; color:var(--green); }

/* ---- editbar / callout ---- */
.ppm-sop-lib-editbar { display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:12px; background:rgba(229,50,43,.1); border:1px solid rgba(229,50,43,.25); color:var(--sop-dark); font-size:13px; font-weight:500; margin-bottom:16px; }
[data-theme="dark"] .ppm-sop-lib-editbar { color:var(--sop); }
.ppm-sop-lib-editdot { width:8px; height:8px; border-radius:50%; background:var(--sop); flex-shrink:0; }
.ppm-sop-lib-callout { padding:13px 16px; border-radius:12px; background:var(--surface-2); border:1px solid var(--hairline); font-size:13px; color:var(--text-2); line-height:1.5; margin:6px 0; }
.ppm-sop-lib-callout-info { background:var(--accent-softer); border-color:var(--accent-soft); color:var(--text-2); }
.ppm-sop-lib-tlinkbtn { color:var(--accent); font-weight:600; cursor:pointer; }
.ppm-sop-lib-tlinkbtn:hover { text-decoration:underline; }

/* ---- hero (solid internal-tool surface; no gradient/marketing chrome) ---- */
.ppm-sop-lib-hero { padding:22px 22px; border-radius:var(--radius-md); background:var(--surface); color:var(--text); margin-bottom:18px; border:1px solid var(--hairline); }
.ppm-sop-lib-hero h1 { font-size:22px; font-weight:800; letter-spacing:-.4px; margin-bottom:4px; }
.ppm-sop-lib-hero p { font-size:13.5px; color:var(--text-2); max-width:640px; line-height:1.5; margin-bottom:16px; }
.ppm-sop-lib-hero-search { display:flex; gap:9px; max-width:560px; }
.ppm-sop-lib-hero-search input { flex:1; padding:11px 14px; border-radius:10px; border:1px solid var(--hairline); background:var(--surface-2); color:var(--text); font-size:13.5px; font-family:var(--font); outline:none; }
.ppm-sop-lib-hero-search input::placeholder { color:var(--text-3); }
.ppm-sop-lib-hero-search input:focus { border-color:var(--sop); }
.ppm-sop-lib-hero-search button { padding:11px 20px; border-radius:10px; border:none; background:var(--sop); color:#fff; font-weight:700; font-size:13.5px; font-family:var(--font); cursor:pointer; transition:background .15s ease; }
.ppm-sop-lib-hero-search button:hover { background:var(--sop-dark); }

/* ---- tiles (auto-fit so they never squish at odd widths) ---- */
.ppm-sop-lib-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.ppm-sop-lib-tile { min-width:0; padding:18px; border-radius:var(--radius-md); border:1px solid var(--glass-border); background:var(--glass); box-shadow:var(--shadow-sm); }
.ppm-sop-lib-tile-num { font-size:30px; font-weight:800; letter-spacing:-.6px; line-height:1; color:var(--sop); }
.ppm-sop-lib-tile-label { font-size:12.5px; color:var(--text-3); font-weight:600; margin-top:7px; }

/* ---- panels / jump ---- */
.ppm-sop-lib-row2 { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; margin-bottom:16px; }
.ppm-sop-lib-row2 > .ppm-sop-lib-panel { min-width:0; }
.ppm-sop-lib-panel { padding:18px 20px; border-radius:var(--radius-md); border:1px solid var(--glass-border); background:var(--glass); box-shadow:var(--shadow-sm); }
.ppm-sop-lib-panel h3 { font-size:15px; font-weight:700; }
.ppm-sop-lib-panel-sub { font-size:12.5px; color:var(--text-3); margin:4px 0 14px !important; }
.ppm-sop-lib-jump { display:flex; flex-direction:column; gap:8px; }
.ppm-sop-lib-jumpitem { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px; border:1px solid var(--hairline); background:var(--surface); cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text); transition:all .14s ease; }
.ppm-sop-lib-jumpitem:hover { background:var(--glass-strong); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.ppm-sop-lib-jumpitem svg { width:18px; height:18px; color:var(--sop); }

/* ---- roadmap ---- */
.ppm-sop-lib-rm-wk { margin-bottom:12px; }
.ppm-sop-lib-rm-wkh { display:flex; align-items:baseline; gap:9px; margin-bottom:7px; }
.ppm-sop-lib-rm-cap { font-size:12px; color:var(--text-3); }
.ppm-sop-lib-rm-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ppm-sop-lib-rmchip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; border:1px solid var(--hairline); border-radius:999px; padding:4px 11px; background:var(--surface); cursor:pointer; transition:all .14s ease; }
.ppm-sop-lib-rmchip:hover { background:var(--glass-strong); border-color:var(--sop); }
.ppm-sop-lib-pts { font-size:11px; font-weight:700; padding:2px 9px; border-radius:7px; background:var(--surface-2); color:var(--text-2); }
.ppm-sop-lib-pts-gold { color:var(--sop); background:rgba(229,50,43,.12); }
.ppm-sop-lib-pts-good { color:var(--green); background:var(--green-bg); }
.ppm-sop-lib-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.ppm-sop-lib-dot-live { background:var(--green); } .ppm-sop-lib-dot-progress { background:var(--orange); } .ppm-sop-lib-dot-planned { background:var(--text-3); }

/* ---- recording roadmap (CEO-editable planning board) ---- */
.ppm-sop-lib-rm-head { display:flex; align-items:center; gap:10px; }
.ppm-sop-lib-rm-head h3 { font-size:15px; font-weight:700; }
.ppm-sop-lib-rm-edtag { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--sop); background:rgba(229,50,43,.12); padding:3px 9px; border-radius:999px; }
.ppm-sop-lib-rm-step { display:flex; gap:11px; padding:12px 0; border-top:1px solid var(--hairline); }
.ppm-sop-lib-rm-step:first-of-type { border-top:none; }
.ppm-sop-lib-rm-stepn { width:24px; height:24px; flex-shrink:0; border-radius:7px; background:var(--sop); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; }
.ppm-sop-lib-rm-stepmain { flex:1; min-width:0; }
.ppm-sop-lib-rm-steptitle { font-size:13.5px; font-weight:700; color:var(--text); }
.ppm-sop-lib-rm-stepsub { font-size:12px; color:var(--text-3); line-height:1.5; margin-top:3px; }
.ppm-sop-lib-rm-checks { display:flex; flex-direction:column; gap:5px; margin-top:10px; }
.ppm-sop-lib-rm-substeps { margin-top:9px; padding-left:2px; }
.ppm-sop-lib-rm-check { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--text-2); line-height:1.45; }
.ppm-sop-lib-rm-check.ppm-done .ppm-sop-lib-rm-checktext { color:var(--text-3); text-decoration:line-through; }
.ppm-sop-lib-rm-check .ppm-sop-lib-check { width:16px; height:16px; margin-top:1px; }
.ppm-sop-lib-rm-checktext { flex:1; min-width:0; }
.ppm-sop-lib-rm-x { flex-shrink:0; width:20px; height:20px; border-radius:6px; border:none; background:none; color:var(--text-3); font-size:16px; line-height:1; cursor:pointer; padding:0; }
.ppm-sop-lib-rm-x:hover { color:var(--red); background:var(--surface-2); }
.ppm-sop-lib-rm-empty { font-size:12px; color:var(--text-3); padding:4px 0; }
.ppm-sop-lib-rm-add { display:flex; gap:7px; margin-top:9px; }
.ppm-sop-lib-rm-add input { flex:1; min-width:0; padding:8px 11px; border-radius:9px; border:1px solid var(--hairline); background:var(--surface); color:var(--text); font-size:12.5px; font-family:var(--font); outline:none; }
.ppm-sop-lib-rm-add input:focus { border-color:var(--sop); }
.ppm-sop-lib-rm-add button { padding:8px 14px; border-radius:9px; border:none; background:var(--sop); color:#fff; font-weight:700; font-size:12.5px; font-family:var(--font); cursor:pointer; }
.ppm-sop-lib-rm-add button:hover { background:var(--sop-dark); }
.ppm-sop-lib-rm-add-sm input, .ppm-sop-lib-rm-add-sm button { font-size:12px; padding:6px 11px; }
.ppm-sop-lib-rm-upcoming { margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline); }
.ppm-sop-lib-rm-uphead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ppm-sop-lib-rm-item { border:1px solid var(--hairline); border-radius:12px; background:var(--surface); padding:13px 14px; margin-bottom:10px; }
.ppm-sop-lib-rm-item.ppm-shipped { border-color:var(--green); background:var(--green-bg); }
.ppm-sop-lib-rm-itemhead { display:flex; align-items:center; gap:9px; }
.ppm-sop-lib-rm-itemtitle { flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--text); }
.ppm-sop-lib-rm-shipped { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--green); padding:3px 9px; border-radius:999px; }
.ppm-sop-lib-rm-itemabout { font-size:12px; color:var(--text-3); line-height:1.5; margin-top:5px; }
.ppm-sop-lib-rm-itemfoot { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:11px; }
.ppm-sop-lib-rm-link { font-size:12.5px; font-weight:600; color:var(--accent); text-decoration:none; }
.ppm-sop-lib-rm-link:hover { text-decoration:underline; }
.ppm-sop-lib-rm-ship { color:var(--green) !important; border-color:var(--green) !important; }
.ppm-sop-lib-addrole { color:var(--sop); border-style:dashed !important; }
.ppm-sop-lib-addrole:hover { background:var(--glass-strong); color:var(--sop); border-color:var(--sop) !important; }

/* ---- continue ---- */
.ppm-sop-lib-continue { display:flex; align-items:center; gap:12px; padding:13px; border-radius:12px; border:1px solid var(--hairline); background:var(--surface); cursor:pointer; transition:all .14s ease; }
.ppm-sop-lib-continue:hover { background:var(--glass-strong); box-shadow:var(--shadow-sm); }
.ppm-sop-lib-continue-ic { width:42px; height:42px; border-radius:11px; background:var(--sop); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; flex-shrink:0; }
.ppm-sop-lib-continue-main { flex:1; min-width:0; }
.ppm-sop-lib-continue-k { font-size:11.5px; color:var(--text-3); font-weight:600; }
.ppm-sop-lib-continue-t { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ppm-sop-lib-lesson-go { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--text-3); font-size:18px; font-weight:700; background:none; border:none; cursor:pointer; }

/* ---- page head ---- */
.ppm-sop-lib-page-head { margin-bottom:16px; }
.ppm-sop-lib-crumbs { font-size:12px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.ppm-sop-lib-crumbs b { color:var(--sop); }
.ppm-sop-lib-page-head h1 { font-size:26px; font-weight:800; letter-spacing:-.5px; margin-bottom:6px; }
.ppm-sop-lib-page-head p { font-size:13.5px; color:var(--text-2); line-height:1.55; max-width:680px; }

/* ---- modules / lessons ---- */
.ppm-sop-lib-module { margin-bottom:16px; border:1px solid var(--glass-border); border-radius:var(--radius-md); background:var(--glass); overflow:hidden; box-shadow:var(--shadow-sm); }
.ppm-sop-lib-mod-head { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--hairline); }
.ppm-sop-lib-mod-badge { width:26px; height:26px; border-radius:8px; background:var(--surface-2); color:var(--text-2); display:grid; place-items:center; font-weight:800; font-size:13px; flex-shrink:0; }
.ppm-sop-lib-mod-badge-done { background:var(--green); color:#fff; }
.ppm-sop-lib-mod-head h2 { font-size:15px; font-weight:700; flex:1; }
.ppm-sop-lib-mod-meta { font-size:12px; color:var(--text-3); font-weight:600; }
.ppm-sop-lib-mod-meta-done { color:var(--green); }
.ppm-sop-lib-emptymod { padding:14px 18px; font-size:12.5px; color:var(--text-3); }
.ppm-sop-lib-lesson { display:flex; align-items:flex-start; gap:12px; padding:13px 18px; border-bottom:1px solid var(--hairline); transition:background .12s ease; }
.ppm-sop-lib-lesson:last-child { border-bottom:none; }
.ppm-sop-lib-lesson:hover { background:var(--row-hover); }
.ppm-sop-lib-lesson.ppm-done .ppm-sop-lib-lesson-t { color:var(--text-3); text-decoration:line-through; }
.ppm-sop-lib-check { width:18px; height:18px; margin-top:2px; accent-color:var(--green); cursor:pointer; flex-shrink:0; }
.ppm-sop-lib-statusdot { width:24px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:3px; }
.ppm-sop-lib-lesson-main { flex:1; min-width:0; cursor:pointer; }
.ppm-sop-lib-lesson-code { font-size:11px; font-weight:700; color:var(--text-3); letter-spacing:.02em; margin-bottom:3px; }
.ppm-sop-lib-lesson-t { font-size:14px; font-weight:600; line-height:1.35; }
.ppm-sop-lib-lesson-d { font-size:12.5px; color:var(--text-3); line-height:1.45; margin-top:3px; }
.ppm-sop-lib-lesson-right { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.ppm-sop-lib-pts { white-space:nowrap; }
.ppm-sop-lib-editable { outline:none; border-radius:6px; padding:1px 5px; margin:-1px -5px; }
.ppm-sop-lib-editable:focus { background:var(--surface); box-shadow:0 0 0 2px rgba(229,50,43,.25); }
.ppm-sop-lib-edctl { display:flex; gap:6px; }
.ppm-sop-lib-edbtn { font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:8px; border:1px solid var(--hairline); background:var(--surface); color:var(--text-2); cursor:pointer; font-family:var(--font); }
.ppm-sop-lib-edbtn:hover { background:var(--glass-strong); }
.ppm-sop-lib-edbtn-del { color:var(--red); }
.ppm-sop-lib-addmod { display:block; width:100%; padding:12px; border-radius:12px; border:1.5px dashed var(--hairline-strong); background:transparent; color:var(--text-3); font-weight:600; font-size:13px; cursor:pointer; font-family:var(--font); margin-bottom:16px; }
.ppm-sop-lib-addmod:hover { border-color:var(--sop); color:var(--sop); }

/* ---- full-CRUD edit fields (tools / steps / points) ---- */
.ppm-sop-lib-edfields { display:flex; flex-direction:column; gap:9px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--hairline); }
.ppm-sop-lib-edfield label { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:700; margin-bottom:4px; }
.ppm-sop-lib-edfield-sm { max-width:140px; }
.ppm-sop-lib-edinput { font-size:12.5px; line-height:1.5; color:var(--text); padding:7px 10px; border-radius:9px; border:1px solid var(--hairline); background:var(--surface); min-height:18px; font-family:var(--font); }
.ppm-sop-lib-edinput:focus { outline:none; border-color:var(--sop); box-shadow:0 0 0 2px rgba(229,50,43,.18); }
.ppm-sop-lib-edinput-multi { white-space:pre-wrap; min-height:64px; }

/* ---- ramp-up assignment status row ---- */
.ppm-sop-lib-ramprow { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:9px; padding-top:9px; border-top:1px dashed var(--hairline); font-size:12.5px; color:var(--text-2); }
.ppm-sop-lib-ramprow-l { color:var(--text-3); font-weight:600; }

/* ---- drag-reorder ---- */
.ppm-sop-lib-grip { display:inline-flex; align-items:center; justify-content:center; color:var(--text-3); font-size:12px; line-height:.6; letter-spacing:-2px; cursor:grab; user-select:none; padding:0 2px; }
.ppm-sop-lib-grip-lesson { margin-top:2px; flex-shrink:0; }
.ppm-sop-lib-mod-draggable { cursor:default; }
.ppm-sop-lib-mod-draggable .ppm-sop-lib-mod-head { cursor:grab; }
.ppm-sop-lib-lesson-ed { cursor:default; }
.ppm-sop-lib-dragging { opacity:.45; }
.ppm-sop-lib-dragover { box-shadow:0 -2px 0 0 var(--sop) inset, 0 2px 0 0 var(--sop) inset; }
.ppm-sop-lib-module.ppm-sop-lib-dragover { box-shadow:0 0 0 2px var(--sop); }

/* ---- database ---- */
.ppm-sop-lib-dbtools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.ppm-sop-lib-fsearch { position:relative; flex:1; min-width:240px; display:flex; align-items:center; }
.ppm-sop-lib-fsearch svg { position:absolute; left:12px; width:15px; height:15px; color:var(--text-3); }
.ppm-sop-lib-fsearch input { width:100%; padding:10px 12px 10px 34px; border-radius:11px; border:1px solid var(--hairline); background:var(--surface); color:var(--text); font-size:13.5px; font-family:var(--font); outline:none; }
.ppm-sop-lib-fsearch input:focus { border-color:var(--sop); }
.ppm-sop-lib-dchip { padding:8px 13px; border-radius:10px; border:1px solid var(--hairline); background:var(--surface); color:var(--text-2); font-size:12.5px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all .14s ease; }
.ppm-sop-lib-dchip:hover { color:var(--text); }
.ppm-sop-lib-dchip.ppm-on { background:var(--sop); color:#fff; border-color:var(--sop); }
.ppm-sop-lib-table { border:1px solid var(--glass-border); border-radius:var(--radius-md); overflow:hidden; background:var(--glass); box-shadow:var(--shadow-sm); }
.ppm-sop-lib-trow { display:grid; grid-template-columns:90px 1fr 140px 160px 80px; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--hairline); cursor:pointer; transition:background .12s ease; }
.ppm-sop-lib-trow:last-child { border-bottom:none; }
.ppm-sop-lib-trow:hover { background:var(--row-hover); }
.ppm-sop-lib-trow-head { background:var(--surface-2); cursor:default; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:700; }
.ppm-sop-lib-trow-head:hover { background:var(--surface-2); }
.ppm-sop-lib-tcode { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--text-2); }
.ppm-sop-lib-tstatus { width:8px; height:8px; }
.ppm-sop-lib-ttitle { font-size:13.5px; font-weight:600; min-width:0; }
.ppm-sop-lib-ttitle small { display:block; font-size:11.5px; color:var(--text-3); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.ppm-sop-lib-tdept { font-size:12.5px; color:var(--text-2); }
.ppm-sop-lib-ttools { display:flex; gap:5px; flex-wrap:wrap; }
.ppm-sop-lib-tool { font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--surface-2); color:var(--text-3); }
.ppm-sop-lib-tlink { text-align:right; }
.ppm-sop-lib-tlinkbtn { font-size:12.5px; }
.ppm-sop-lib-nomatch { padding:30px; text-align:center; color:var(--text-3); font-size:14px; }

/* ---- overlays / drawer ---- */
.ppm-sop-lib-overlay { position:fixed; inset:0; background:rgba(15,23,42,.34); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:1100; opacity:0; visibility:hidden; transition:opacity .26s ease; }
.ppm-sop-lib-overlay.ppm-on { opacity:1; visibility:visible; }
.ppm-sop-lib-drawer { position:fixed; top:0; right:0; bottom:0; width:560px; max-width:94vw; z-index:1101; background:var(--glass-strong); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border-left:1px solid var(--glass-border); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .3s cubic-bezier(.32,.72,0,1); display:flex; flex-direction:column; }
.ppm-sop-lib-drawer.ppm-on { transform:translateX(0); }
.ppm-sop-lib-dhead { padding:18px 22px 14px; border-bottom:1px solid var(--hairline); }
.ppm-sop-lib-dhead-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ppm-sop-lib-dcrumb { font-size:11.5px; color:var(--text-3); font-weight:600; }
.ppm-sop-lib-dclose { width:32px; height:32px; min-width:44px; min-height:44px; border-radius:9px; border:1px solid var(--hairline); background:var(--surface); color:var(--text-2); font-size:20px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.ppm-sop-lib-dclose:hover { background:var(--glass-strong); }
.ppm-sop-lib-dtitle { font-size:20px; font-weight:800; letter-spacing:-.3px; line-height:1.25; margin-bottom:12px; }
.ppm-sop-lib-dmeta { display:flex; gap:7px; flex-wrap:wrap; }
.ppm-sop-lib-pill { font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:7px; background:var(--surface-2); color:var(--text-2); }
.ppm-sop-lib-pill-gold { background:rgba(229,50,43,.12); color:var(--sop); }
.ppm-sop-lib-dbody { flex:1; overflow-y:auto; padding:18px 22px 40px; }
.ppm-sop-lib-tabs { display:flex; gap:3px; margin-bottom:16px; border-bottom:1px solid var(--hairline); }
.ppm-sop-lib-tab { padding:10px 13px; font-size:13px; font-weight:600; color:var(--text-3); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:var(--font); }
.ppm-sop-lib-tab:hover { color:var(--text); }
.ppm-sop-lib-tab.ppm-on { color:var(--sop); border-bottom-color:var(--sop); }
.ppm-sop-lib-pane { display:none; }
.ppm-sop-lib-pane.ppm-on { display:block; }
.ppm-sop-lib-block { margin-bottom:18px; }
.ppm-sop-lib-block p { font-size:13.5px; line-height:1.6; color:var(--text-2); }
.ppm-sop-lib-blabel { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:700; margin-bottom:9px; }
.ppm-sop-lib-steps { margin:0; padding-left:20px; }
.ppm-sop-lib-steps li { font-size:13px; line-height:1.55; color:var(--text-2); margin-bottom:7px; }
.ppm-sop-lib-openbtn { display:inline-block; padding:11px 20px; border-radius:11px; background:var(--sop); color:#fff; font-weight:700; font-size:13.5px; text-decoration:none; cursor:pointer; }
.ppm-sop-lib-openbtn:hover { background:var(--sop-dark); }
.ppm-sop-lib-openbtn.ppm-dis { background:var(--surface-2); color:var(--text-3); cursor:default; }
.ppm-sop-lib-connect { display:flex; gap:9px; margin-top:11px; }
.ppm-sop-lib-connect input { flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--hairline); background:var(--surface); color:var(--text); font-size:13px; font-family:var(--font); outline:none; }
.ppm-sop-lib-connect input:focus { border-color:var(--sop); }
.ppm-sop-lib-connect button { padding:10px 18px; border-radius:10px; border:none; background:var(--sop); color:#fff; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font); }
.ppm-sop-lib-relrow { display:flex; flex-direction:column; gap:8px; }
.ppm-sop-lib-relchip { display:block; padding:11px 13px; border-radius:11px; border:1px solid var(--hairline); background:var(--surface); font-size:13px; cursor:pointer; transition:all .14s ease; }
.ppm-sop-lib-relchip:hover { background:var(--glass-strong); border-color:var(--sop); }
.ppm-sop-lib-relchip b { color:var(--sop); margin-right:6px; }
.ppm-sop-lib-muted { font-size:13px; color:var(--text-3); }
.ppm-sop-lib-disc-note { font-size:12.5px; color:var(--text-3); line-height:1.5; padding:11px 14px; border-radius:11px; background:var(--surface-2); margin-bottom:16px; }
.ppm-sop-lib-cbox { margin-top:14px; }
.ppm-sop-lib-cbox textarea { width:100%; min-height:80px; padding:11px 13px; border-radius:12px; border:1px solid var(--hairline); background:var(--surface); color:var(--text); font-size:13px; font-family:var(--font); resize:vertical; outline:none; }
.ppm-sop-lib-cbox textarea:focus { border-color:var(--sop); }
.ppm-sop-lib-crow { display:flex; align-items:center; gap:12px; margin-top:9px; }
.ppm-sop-lib-postbtn { padding:9px 18px; border-radius:10px; border:none; background:var(--sop); color:#fff; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font); }
.ppm-sop-lib-discord { font-size:13px; color:var(--accent); font-weight:600; text-decoration:none; }
.ppm-sop-lib-comment { padding:12px 0; border-bottom:1px solid var(--hairline); }
.ppm-sop-lib-comment-top { display:flex; align-items:center; gap:9px; margin-bottom:5px; }
.ppm-sop-lib-comment-who { font-size:12.5px; font-weight:700; color:var(--sop); }
.ppm-sop-lib-comment-time { font-size:11px; color:var(--text-3); }
.ppm-sop-lib-comment-del { margin-left:auto; font-size:11px; color:var(--text-3); background:none; border:none; cursor:pointer; font-family:var(--font); }
.ppm-sop-lib-comment-del:hover { color:var(--red); }
.ppm-sop-lib-comment-body { font-size:13px; color:var(--text-2); line-height:1.5; }

/* ---- command palette ---- */
.ppm-sop-lib-cmd-overlay { position:fixed; inset:0; background:rgba(15,23,42,.52); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:1200; opacity:0; visibility:hidden; transition:opacity .2s ease; display:flex; align-items:flex-start; justify-content:center; padding:80px 20px; }
.ppm-sop-lib-cmd-overlay.ppm-on { opacity:1; visibility:visible; }
.ppm-sop-lib-cmd { width:620px; max-width:100%; max-height:70vh; background:var(--cmd-bg, #fff); border:1px solid var(--glass-border); border-radius:18px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; }
[data-theme="dark"] .ppm-sop-lib-cmd, [data-theme="dark"] .ppm-sop-lib-vis { background:#17171b; }
.ppm-sop-lib-cmd-bar { display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid var(--hairline); }
.ppm-sop-lib-cmd-bar svg { width:18px; height:18px; color:var(--text-3); }
.ppm-sop-lib-cmd-bar input { flex:1; border:none; background:none; outline:none; font-size:16px; font-family:var(--font); color:var(--text); }
.ppm-sop-lib-cmd-bar kbd { font-family:var(--font); font-size:11px; font-weight:600; padding:3px 7px; border-radius:6px; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-3); }
.ppm-sop-lib-cmd-body { overflow-y:auto; padding:10px; }
.ppm-sop-lib-cmd-hint { padding:10px; }
.ppm-sop-lib-cmd-hint-l { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:700; margin-bottom:10px; }
.ppm-sop-lib-cmd-ex { display:block; padding:10px 13px; border-radius:10px; font-size:13.5px; color:var(--text-2); cursor:pointer; margin-bottom:5px; }
.ppm-sop-lib-cmd-ex:hover { background:var(--row-hover); color:var(--text); }
.ppm-sop-lib-cmd-empty { padding:24px; text-align:center; color:var(--text-3); font-size:13.5px; }
.ppm-sop-lib-cmd-answer { margin:6px; padding:14px 16px; border-radius:13px; background:rgba(229,50,43,.08); border:1px solid rgba(229,50,43,.22); }
.ppm-sop-lib-cmd-answer-ai { background:var(--green-bg); border-color:var(--hairline); }
.ppm-sop-lib-cmd-answer-h { display:flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--sop); font-weight:700; margin-bottom:7px; }
.ppm-sop-lib-cmd-answer-ai .ppm-sop-lib-cmd-answer-h { color:var(--green); }
.ppm-sop-lib-ai-tag { display:inline-flex; align-items:center; padding:1px 7px; border-radius:6px; background:var(--green); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.04em; }
.ppm-sop-lib-cmd-answer-b { font-size:13.5px; line-height:1.55; color:var(--text); }
.ppm-sop-lib-cmd-answer-p { font-size:13.5px; line-height:1.55; color:var(--text); margin:0 0 8px; }
.ppm-sop-lib-cmd-answer-p:last-child { margin-bottom:0; }
.ppm-sop-lib-cmd-srcrow { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:9px; border-top:1px solid var(--hairline); }
.ppm-sop-lib-cmd-srclabel { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:700; }
.ppm-sop-lib-cmd-src-chip { display:inline-flex; align-items:center; padding:3px 9px; border-radius:7px; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text); font-size:11.5px; font-weight:700; cursor:pointer; }
.ppm-sop-lib-cmd-src-chip:hover { background:var(--row-hover); border-color:var(--accent-soft); color:var(--accent); }
.ppm-sop-lib-cmd-src-chip-x { cursor:default; color:var(--text-3); font-weight:600; }
.ppm-sop-lib-cmd-src-chip-x:hover { background:var(--surface-2); border-color:var(--hairline); color:var(--text-3); }
.ppm-sop-lib-hit { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px; cursor:pointer; }
.ppm-sop-lib-hit:hover, .ppm-sop-lib-hit.ppm-sel { background:var(--row-hover); }
.ppm-sop-lib-hit-ic { width:46px; height:34px; border-radius:8px; background:var(--surface-2); color:var(--text-2); display:grid; place-items:center; font-weight:700; font-size:11px; flex-shrink:0; }
.ppm-sop-lib-hit-main { flex:1; min-width:0; }
.ppm-sop-lib-hit-t { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ppm-sop-lib-hit-crumb { font-size:11.5px; color:var(--text-3); }
.ppm-sop-lib-hit-pct { width:64px; flex-shrink:0; text-align:right; }
.ppm-sop-lib-hit-pct-num { font-size:12px; font-weight:700; color:var(--sop); }
.ppm-sop-lib-hit-pct-bar { height:4px; border-radius:20px; background:var(--surface-2); overflow:hidden; margin-top:4px; }
.ppm-sop-lib-hit-pct-fill { height:100%; background:var(--sop); border-radius:20px; }
.ppm-sop-lib-mk { background:rgba(229,50,43,.22); color:inherit; border-radius:3px; padding:0 2px; }

/* ---- visibility modal ---- */
/* dark: never let the vis or cmd panel render as a white slab */
.ppm-sop-lib-vis { width:420px; max-width:100%; background:var(--glass-strong, #fff); border:1px solid var(--glass-border); border-radius:18px; box-shadow:var(--shadow-lg); padding:22px; color:var(--text); }
[data-theme="dark"] .ppm-sop-lib-vis { background:#1c1c22; }
.ppm-sop-lib-vis-head h3 { font-size:16px; font-weight:700; }
.ppm-sop-lib-vis-sub { font-size:12.5px; color:var(--text-3); margin-top:4px; margin-bottom:14px; }
.ppm-sop-lib-vis-row { display:flex; align-items:center; gap:10px; padding:9px 0; font-size:13.5px; font-weight:500; cursor:pointer; }
.ppm-sop-lib-vis-row input { width:17px; height:17px; accent-color:var(--sop); }
.ppm-sop-lib-vis-actions { display:flex; gap:9px; margin-top:14px; }
.ppm-sop-lib-vis-save { flex:1; padding:10px; border-radius:11px; border:none; background:var(--sop); color:#fff; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font); }
.ppm-sop-lib-vis-reset { padding:10px 16px; border-radius:11px; border:1px solid var(--hairline); background:var(--surface); color:var(--text-2); font-weight:600; font-size:13px; cursor:pointer; font-family:var(--font); }
.ppm-sop-lib-vis-note { font-size:12px; color:var(--text-3); margin-top:10px; line-height:1.5; }

/* ---- our glass modal (prompt / confirm — replaces native dialogs) ---- */
.ppm-sop-lib-modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.46); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:1300; opacity:0; visibility:hidden; transition:opacity .18s ease; display:flex; align-items:center; justify-content:center; padding:24px; }
[data-theme="dark"] .ppm-sop-lib-modal-overlay { background:rgba(0,0,0,.62); }
.ppm-sop-lib-modal-overlay.ppm-on { opacity:1; visibility:visible; }
.ppm-sop-lib-modal { width:440px; max-width:100%; background:var(--glass-strong); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); overflow:hidden; transform:translateY(8px) scale(.98); transition:transform .2s cubic-bezier(.32,.72,0,1); }
.ppm-sop-lib-modal-overlay.ppm-on .ppm-sop-lib-modal { transform:translateY(0) scale(1); }
.ppm-sop-lib-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 0; }
.ppm-sop-lib-modal-title { font-size:16.5px; font-weight:800; letter-spacing:-.2px; color:var(--text); line-height:1.3; }
.ppm-sop-lib-modal-x { width:30px; height:30px; flex-shrink:0; border-radius:9px; border:1px solid var(--hairline); background:var(--surface); color:var(--text-2); font-size:19px; line-height:1; cursor:pointer; transition:all .14s ease; }
.ppm-sop-lib-modal-x:hover { background:var(--glass-strong); color:var(--text); }
.ppm-sop-lib-modal-body { padding:12px 20px 4px; }
.ppm-sop-lib-modal-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:700; margin-bottom:8px; }
.ppm-sop-lib-modal-input { width:100%; padding:11px 13px; border-radius:11px; border:1px solid var(--hairline); background:var(--surface); color:var(--text); font-size:14px; font-family:var(--font); outline:none; transition:border-color .14s ease, box-shadow .14s ease; }
.ppm-sop-lib-modal-input::placeholder { color:var(--text-3); }
.ppm-sop-lib-modal-input:focus { border-color:var(--sop); box-shadow:0 0 0 3px var(--accent-softer); }
.ppm-sop-lib-modal-input-err { border-color:var(--red); box-shadow:0 0 0 3px var(--red-bg); }
.ppm-sop-lib-modal-msg { font-size:13.5px; line-height:1.55; color:var(--text-2); }
.ppm-sop-lib-modal-actions { display:flex; justify-content:flex-end; gap:9px; padding:16px 20px 18px; }
.ppm-sop-lib-modal-cancel { padding:9px 16px; border-radius:11px; border:1px solid var(--hairline); background:var(--surface); color:var(--text-2); font-weight:600; font-size:13px; cursor:pointer; font-family:var(--font); transition:all .14s ease; }
.ppm-sop-lib-modal-cancel:hover { background:var(--glass-strong); color:var(--text); }
.ppm-sop-lib-modal-ok { padding:9px 18px; border-radius:11px; border:none; background:var(--sop); color:#fff; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font); transition:background .14s ease, box-shadow .14s ease; box-shadow:0 6px 18px var(--accent-soft); }
.ppm-sop-lib-modal-ok:hover { background:var(--sop-dark); }
.ppm-sop-lib-modal-ok-danger { background:var(--red); box-shadow:0 6px 18px var(--red-bg); }
.ppm-sop-lib-modal-ok-danger:hover { background:var(--accent-strong); }

/* ---- backdrop (mobile rail) ---- */
.ppm-sop-lib-backdrop { display:none; }

/* ============================================================
   NEW FEATURES (2026-06-17)
   ============================================================ */

/* ---- online/offline hero search status ---- */
.ppm-sop-lib-hero-search { align-items:center; }
.ppm-sop-lib-hero-searchstatus { font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:8px; white-space:nowrap; }
.sop-herostat-online { color:#1f9d57; background:rgba(31,157,87,.12); border:1px solid rgba(31,157,87,.25); }
.sop-herostat-offline { color:var(--text-3); background:var(--surface-2); border:1px solid var(--hairline); }

/* ---- rich card meta row (status pill + owner chip + last-updated) ---- */
.ppm-sop-lib-lesson-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:7px; }
/* status pill */
.ppm-sop-lib-spill { font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px; letter-spacing:.03em; }
.ppm-sop-lib-spill-live { background:rgba(31,157,87,.14); color:#1a8a4a; }
[data-theme="dark"] .ppm-sop-lib-spill-live { background:rgba(31,157,87,.22); color:#4ade80; }
.ppm-sop-lib-spill-progress { background:rgba(245,158,11,.14); color:#b45309; }
[data-theme="dark"] .ppm-sop-lib-spill-progress { background:rgba(245,158,11,.22); color:#fbbf24; }
.ppm-sop-lib-spill-planned { background:var(--surface-2); color:var(--text-3); }
/* owner role chip */
.ppm-sop-lib-ownerchip { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:7px; background:var(--surface-2); color:var(--text-3); border:1px solid var(--hairline); }
/* last-updated */
.ppm-sop-lib-lastupdated { font-size:10.5px; color:var(--text-3); }

/* ---- command palette hit: section pill ---- */
.ppm-sop-lib-hit-section { margin-top:3px; }
.ppm-sop-lib-hit-section-pill .ppm-sop-lib-spill { font-size:10px; padding:1px 7px; }

/* ---- per-section progress bar ---- */
.ppm-sop-lib-progbar-wrap { display:flex; flex-direction:column; gap:6px; padding:12px 18px 14px; background:var(--surface-2); border-bottom:1px solid var(--hairline); margin-bottom:0; }
.ppm-sop-lib-progbar-label { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--text-3); }
.ppm-sop-lib-progbar-label b { color:var(--text); font-weight:700; }
.ppm-sop-lib-progbar-prog { font-size:11px; color:var(--orange, #e07b00); font-weight:600; }
.ppm-sop-lib-progbar-track { height:5px; border-radius:20px; background:var(--hairline); overflow:hidden; }
.ppm-sop-lib-progbar-fill { height:100%; border-radius:20px; background:var(--sop); transition:width .5s ease; }

/* ---- "Searching with Claude…" skeleton ---- */
.ppm-sop-lib-cmd-searching { display:flex; align-items:center; gap:9px; padding:14px 16px; margin:6px; border-radius:13px; background:var(--surface-2); border:1px solid var(--hairline); font-size:13px; color:var(--text-3); font-weight:500; }
@keyframes sop-spin { to { transform:rotate(360deg); } }
.sop-spin { width:14px; height:14px; border:2px solid var(--hairline-strong, rgba(200,200,200,.5)); border-top-color:var(--sop); border-radius:50%; display:inline-block; animation:sop-spin .7s linear infinite; flex-shrink:0; }

/* ---- toast ---- */
.sop-toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%, 16px); background:var(--glass-strong, #222); color:var(--text); border:1px solid var(--glass-border); border-radius:12px; padding:10px 20px; font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); z-index:9999; opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease; pointer-events:none; white-space:nowrap; }
.sop-toast.sop-toast-on { opacity:1; visibility:visible; transform:translate(-50%, 0); }
[data-theme="dark"] .sop-toast { background:#1e1e26; }

/* ============================================================
   DARK MODE FIXES — ensure no white slabs anywhere
   ============================================================ */

/* hero — was using var(--surface) which in some contexts resolves white */
[data-theme="dark"] .ppm-sop-lib-hero { background:var(--glass, #18181e); border-color:var(--glass-border); }

/* module blocks */
[data-theme="dark"] .ppm-sop-lib-module { background:var(--glass, #18181e); border-color:var(--glass-border); }
[data-theme="dark"] .ppm-sop-lib-mod-head { border-bottom-color:var(--hairline); }

/* database table */
[data-theme="dark"] .ppm-sop-lib-table { background:var(--glass, #18181e); border-color:var(--glass-border); }
[data-theme="dark"] .ppm-sop-lib-trow-head { background:var(--surface-2, #111118); }

/* tiles */
[data-theme="dark"] .ppm-sop-lib-tile { background:var(--glass, #18181e); border-color:var(--glass-border); }

/* panels */
[data-theme="dark"] .ppm-sop-lib-panel { background:var(--glass, #18181e); border-color:var(--glass-border); }

/* jump items */
[data-theme="dark"] .ppm-sop-lib-jumpitem { background:var(--glass, #18181e); border-color:var(--glass-border); }
[data-theme="dark"] .ppm-sop-lib-jumpitem:hover { background:var(--glass-strong, #222); }

/* continue widget */
[data-theme="dark"] .ppm-sop-lib-continue { background:var(--glass, #18181e); border-color:var(--glass-border); }
[data-theme="dark"] .ppm-sop-lib-continue:hover { background:var(--glass-strong, #222); }

/* drawer */
[data-theme="dark"] .ppm-sop-lib-drawer { background:var(--glass-strong, #19191f); border-left-color:var(--glass-border); }
[data-theme="dark"] .ppm-sop-lib-dhead { border-bottom-color:var(--hairline); }
[data-theme="dark"] .ppm-sop-lib-dclose { background:var(--surface, #111); border-color:var(--hairline); }

/* command palette — force dark background in dark mode */
[data-theme="dark"] .ppm-sop-lib-cmd { background:#17171b; color:var(--text); }
[data-theme="dark"] .ppm-sop-lib-cmd-bar { background:#17171b; border-bottom-color:var(--hairline); }
[data-theme="dark"] .ppm-sop-lib-cmd-bar input { color:var(--text); background:transparent; }

/* ramp-up items */
[data-theme="dark"] .ppm-sop-lib-rm-item { background:var(--glass, #18181e); border-color:var(--hairline); }
[data-theme="dark"] .ppm-sop-lib-rm-item.ppm-shipped { background:rgba(31,157,87,.12); border-color:rgba(31,157,87,.3); }

/* role / rolepick buttons */
[data-theme="dark"] .ppm-sop-lib-rolepick-btn { background:var(--glass, #18181e); border-color:var(--hairline); color:var(--text-2); }
[data-theme="dark"] .ppm-sop-lib-rolepick-btn:hover { background:var(--glass-strong, #222); color:var(--text); }

/* topnav items */
[data-theme="dark"] .ppm-sop-lib-topnav-item { color:var(--text-2); }
[data-theme="dark"] .ppm-sop-lib-topnav-item:hover { background:var(--row-hover); color:var(--text); }
[data-theme="dark"] .ppm-sop-lib-topnav-item.ppm-on { background:var(--accent-soft); color:var(--accent); }

/* search btn */
[data-theme="dark"] .ppm-sop-lib-searchbtn { background:var(--glass, #18181e); border-color:var(--glass-border); color:var(--text-3); }
[data-theme="dark"] .ppm-sop-lib-searchbtn:hover { background:var(--glass-strong, #222); }

/* edit bar inputs */
[data-theme="dark"] .ppm-sop-lib-edinput { background:var(--surface, #111); color:var(--text); border-color:var(--hairline); }
[data-theme="dark"] .ppm-sop-lib-hero-search input { background:var(--surface, #111); color:var(--text); border-color:var(--hairline); }
[data-theme="dark"] .ppm-sop-lib-hero-search input::placeholder { color:var(--text-3); }

/* connect / doc input */
[data-theme="dark"] .ppm-sop-lib-connect input { background:var(--surface, #111); color:var(--text); border-color:var(--hairline); }

/* comment box */
[data-theme="dark"] .ppm-sop-lib-cbox textarea { background:var(--surface, #111); color:var(--text); border-color:var(--hairline); }

/* progress bar in dark */
[data-theme="dark"] .ppm-sop-lib-progbar-wrap { background:var(--surface-2, #111118); }
[data-theme="dark"] .ppm-sop-lib-progbar-track { background:var(--hairline); }

/* callout */
[data-theme="dark"] .ppm-sop-lib-callout { background:var(--surface-2, #111118); border-color:var(--hairline); color:var(--text-2); }
[data-theme="dark"] .ppm-sop-lib-callout-info { background:var(--accent-softer, rgba(229,50,43,.08)); border-color:var(--accent-soft); }

/* modal */
[data-theme="dark"] .ppm-sop-lib-modal { background:var(--glass-strong, #1a1a22); }
[data-theme="dark"] .ppm-sop-lib-modal-input { background:var(--surface, #111); color:var(--text); border-color:var(--hairline); }
[data-theme="dark"] .ppm-sop-lib-modal-cancel { background:var(--surface, #111); border-color:var(--hairline); color:var(--text-2); }
[data-theme="dark"] .ppm-sop-lib-modal-x { background:var(--surface, #111); border-color:var(--hairline); color:var(--text-2); }

/* status light */
[data-theme="dark"] .sop-status { background:var(--glass, #18181e); border-color:var(--glass-border); }

/* db tools */
[data-theme="dark"] .ppm-sop-lib-fsearch input { background:var(--surface, #111); color:var(--text); border-color:var(--hairline); }
[data-theme="dark"] .ppm-sop-lib-dchip { background:var(--glass, #18181e); border-color:var(--hairline); color:var(--text-2); }
[data-theme="dark"] .ppm-sop-lib-dchip:hover { color:var(--text); }

/* rm add input */
[data-theme="dark"] .ppm-sop-lib-rm-add input { background:var(--surface, #111); color:var(--text); border-color:var(--hairline); }

/* empty state */
[data-theme="dark"] .ppm-sop-lib-emptystate { background:var(--glass, #18181e); border-color:var(--glass-border); }

/* rel chips */
[data-theme="dark"] .ppm-sop-lib-relchip { background:var(--glass, #18181e); border-color:var(--hairline); }
[data-theme="dark"] .ppm-sop-lib-relchip:hover { background:var(--glass-strong, #222); border-color:var(--sop); }

/* ---- per-teammate completion tracking ---- */
.ppm-sop-lib-complete-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--hairline); background:none; color:var(--text-3); cursor:pointer; padding:0; flex-shrink:0; transition:all .14s ease; }
.ppm-sop-lib-complete-btn svg { width:18px; height:18px; }
.ppm-sop-lib-complete-btn:hover { border-color:var(--green); color:var(--green); background:var(--green-bg); }
.ppm-sop-lib-complete-btn-done { border-color:var(--green); color:var(--green); background:var(--green-bg); }
.ppm-sop-lib-complete-btn-done:hover { border-color:var(--red); color:var(--red); background:var(--red-bg,rgba(229,50,43,.08)); }
/* "You: X / Y complete" stat inside progress bar label */
.ppm-sop-lib-progbar-you { font-size:11.5px; font-weight:600; color:var(--green); background:var(--green-bg); padding:2px 8px; border-radius:7px; white-space:nowrap; }
[data-theme="dark"] .ppm-sop-lib-complete-btn { background:transparent; }

/* ---- per-SOP video embed (16:9, responsive) ---- */
.ppm-sop-lib-video-wrap { position:relative; width:100%; padding-top:56.25%; /* 16:9 */ border-radius:12px; overflow:hidden; margin-bottom:16px; background:var(--surface-2); border:1px solid var(--hairline); }
.ppm-sop-lib-video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
/* video edit row (CEO/director) */
.ppm-sop-lib-video-edit { margin-top:14px; }
.ppm-sop-lib-video-err { font-size:11.5px; color:var(--red); margin-top:5px; padding:5px 8px; border-radius:7px; background:var(--red-bg,rgba(229,50,43,.08)); }
[data-theme="dark"] .ppm-sop-lib-video-wrap { background:var(--surface-2,#111); border-color:var(--hairline); }

/* ---- "Choose from library" row in Company edit mode ---- */
.ppm-sop-lib-choose-row { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.ppm-sop-lib-choose-btn { padding:8px 15px !important; font-size:12.5px !important; color:var(--accent) !important; border-color:var(--accent-soft) !important; }
.ppm-sop-lib-choose-btn:hover { background:var(--accent-softer) !important; }

/* ---- foldable training modules (mobile-first) ---- */
.ppm-sop-lib-mod-head-fold { cursor:pointer; }
.ppm-sop-lib-mod-chevron { color:var(--text-3); font-size:12px; margin-left:2px; transition:transform .18s ease; flex-shrink:0; }
.ppm-sop-lib-mod-collapsed .ppm-sop-lib-mod-chevron { transform:rotate(-90deg); }
.ppm-sop-lib-mod-collapsed .ppm-sop-lib-mod-head { border-bottom:none; }
.ppm-sop-lib-mod-collapsed .ppm-sop-lib-mod-body { display:none; }

/* ---- iPhone (375px) squish fix ---- */
@media (max-width:390px){
  .ppm-sop-lib-topbar { gap:8px; }
  .ppm-sop-lib-searchbtn span { display:none; }   /* hide placeholder text, keep icon */
  .ppm-sop-lib-hero-searchstatus { font-size:10px; padding:4px 9px; white-space:normal; line-height:1.35; } /* stay visible + tappable on phones (compact) */
  .ppm-sop-lib-lesson-meta { gap:5px; }
  .ppm-sop-lib-spill { font-size:10px; padding:2px 7px; }
  .ppm-sop-lib-ownerchip { display:none; }         /* drop owner chip at 375 — title alone is fine */
  .ppm-sop-lib-hit-section { display:none; }       /* palette section pill hidden at 375 */
  .ppm-sop-lib-tiles { gap:10px; }
  .ppm-sop-lib-progbar-label { font-size:11px; }
  .ppm-sop-lib-cmd { border-radius:14px; }
  /* palette: reduce top padding so it sits closer to the top on small screens */
  .ppm-sop-lib-cmd-overlay { padding:24px 12px; }
}

/* ---- responsive ---- */
@media (max-width:1080px){ .ppm-sop-lib-row2 { grid-template-columns:minmax(0,1fr); } .ppm-sop-lib-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  .ppm-sop-lib-topnav { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ppm-sop-lib-topnav::-webkit-scrollbar { display:none; }
  .ppm-sop-lib-topnav-item { white-space:nowrap; flex-shrink:0; }
  /* role / ramp-up seat tabs scroll horizontally instead of wrapping into a squished stack */
  .ppm-sop-lib-rolepick { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; margin-left:-2px; padding-left:2px; }
  .ppm-sop-lib-rolepick::-webkit-scrollbar { display:none; }
  .ppm-sop-lib-rolepick-btn { flex-shrink:0; white-space:nowrap; }
  .ppm-sop-lib-trow { grid-template-columns:80px minmax(0,1fr) 80px; }
  .ppm-sop-lib-tdept-cell, .ppm-sop-lib-ttools-cell { display:none; }
}
@media (max-width:560px){
  .ppm-sop-lib-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ppm-sop-lib-hero { padding:18px 16px; }
  .ppm-sop-lib-hero h1 { font-size:20px; }
  .ppm-sop-lib-hero-search { flex-wrap:wrap; }
  .ppm-sop-lib-hero-search input { min-width:0; }
  .ppm-sop-lib-page-head h1 { font-size:22px; }
  .ppm-sop-lib-topbar { flex-wrap:wrap; }
  .ppm-sop-lib-searchbtn { order:1; flex:1 1 100%; }
  .sop-status { order:3; }
  .ppm-sop-lib-editbtn { order:2; }
  .ppm-sop-lib-mod-head { padding:12px 14px; gap:10px; }
  .ppm-sop-lib-lesson { padding:12px 14px; gap:10px; }
  .ppm-sop-lib-drawer { width:100%; max-width:100%; }
  .ppm-sop-lib-dbody { padding:16px 16px 40px; }
  .ppm-sop-lib-dhead { padding:16px 16px 12px; }
}
@media (max-width:400px){
  .ppm-sop-lib-tiles { grid-template-columns:minmax(0,1fr); }
  .ppm-sop-lib-modal-overlay { padding:16px; align-items:flex-end; }
  .ppm-sop-lib-modal { width:100%; }
}