/* PPC Navigator Portal: the portal bar and the "open a schedule" panel that sit around the Navigator engine in viewer.html.
   Every selector is prefixed pp- so nothing here touches the engine's own styles. Colours come from the engine's tokens. */

[id^="pp"][hidden], .pp-bar [hidden], .pp-open [hidden]{ display:none !important; }
.pp-bar{ flex:none; display:flex; align-items:center; gap:10px; padding:5px 12px; background:var(--surface-1); border-bottom:1px solid var(--line-200); font-family:var(--font-ui); font-size:12px; line-height:1.4; min-height:38px; color:var(--ink-900); }
.pp-ic{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.pp-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }
.pp-mark{ width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,var(--accent),var(--brand-cyan)); display:flex; align-items:center; justify-content:center; color:#fff; }
.pp-mark .pp-ic{ width:13px; height:13px; stroke-width:2.2; }
.pp-brandname{ font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--ink-700); white-space:nowrap; }
.pp-brandname b{ color:var(--accent-text); }
.pp-sep{ width:1px; height:20px; background:var(--line-300); flex:none; }
.pp-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pp-right{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.pp-link{ color:var(--ink-700); text-decoration:none; font-weight:600; padding:5px 8px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:5px; cursor:pointer; background:none; border:none; font:inherit; font-size:12px; }
.pp-link:hover{ background:var(--hover); color:var(--ink-900); }
.pp-btn{ border:none; border-radius:var(--radius); background:var(--brand); color:var(--on-brand); font:inherit; font-size:12px; font-weight:700; padding:5px 10px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; text-decoration:none; }
.pp-btn:hover:not(:disabled){ background:var(--brand-hover); }
.pp-btn:disabled{ opacity:.45; cursor:not-allowed; }
.pp-btn.pp-ghost{ background:transparent; color:var(--ink-700); border:1px solid var(--line-300); }
.pp-btn.pp-ghost:hover:not(:disabled){ background:var(--hover); color:var(--ink-900); }
.pp-btn.pp-big{ width:100%; padding:12px 16px; font-size:14px; }
.pp-saved{ color:var(--st-complete); font-weight:700; font-size:11.5px; display:inline-flex; align-items:center; gap:5px; }
.pp-theme{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line-300); background:transparent; color:var(--ink-700); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.pp-theme:hover{ color:var(--accent-text); border-color:var(--accent); }
.pp-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; border:1px solid transparent; }
.pp-pill .pp-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.pp-pill.plan{ background:var(--st-complete-soft); color:var(--st-complete); border-color:var(--st-complete-line); }
.pp-pill.trial{ background:var(--st-progress-soft); color:var(--st-progress); border-color:var(--st-progress-line); }
.pp-pill.expired{ background:var(--st-critical-soft); color:var(--st-critical); border-color:var(--st-critical-line); }
.pp-pill.demo{ background:var(--accent-soft); color:var(--accent-text); border-color:var(--line-300); }
@media (max-width:760px){ .pp-brandname, .pp-sep, .pp-pill{ display:none; } }

/* open panel */
.pp-open{ flex:1; min-height:0; overflow:auto; background:var(--bg-app); font-family:var(--font-ui); font-size:13px; line-height:1.45; color:var(--ink-900); }
.pp-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:22px 22px 10px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"load sum" "set sum"; gap:18px; align-items:start; }
.pp-a-load{ grid-area:load; } .pp-a-sum{ grid-area:sum; } .pp-a-set{ grid-area:set; }
@media (max-width:900px){ .pp-wrap{ grid-template-columns:minmax(0,1fr); grid-template-areas:"load" "sum" "set"; padding:16px; } }
.pp-card{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); overflow:hidden; }
.pp-card-hd{ display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line-200); }
.pp-num{ width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pp-card-hd h2{ margin:0; font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-700); }
.pp-card-hd .pp-aside{ margin-left:auto; font-size:11px; color:var(--ink-500); }
.pp-card-bd{ padding:16px; }
.pp-drop{ border:1.5px dashed var(--line-300); border-radius:var(--radius-lg); background:var(--surface-1); padding:26px 16px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; outline:none; }
.pp-drop:hover, .pp-drop:focus-visible, .pp-drop.over{ border-color:var(--accent); background:var(--hover); box-shadow:var(--glow-accent); }
.pp-drop .pp-ic{ width:28px; height:28px; color:var(--accent); stroke-width:1.8; }
.pp-drop-big{ font-size:14px; font-weight:700; margin-top:8px; }
.pp-drop-small{ font-size:11.5px; color:var(--ink-500); margin-top:4px; }
.pp-file{ display:none; margin-top:12px; padding:10px 12px; border-radius:var(--radius); background:var(--surface-1); border:1px solid var(--line-200); align-items:center; gap:10px; }
.pp-file.on{ display:flex; }
.pp-file .pp-fname{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pp-file .pp-fmeta{ margin-left:auto; color:var(--ink-500); font-size:11.5px; white-space:nowrap; }
.pp-file .pp-ic{ color:var(--st-complete); }
table.pp-sum{ width:100%; border-collapse:collapse; }
table.pp-sum td{ padding:7px 2px; border-bottom:1px solid var(--line-100); vertical-align:top; font-size:13px; }
table.pp-sum tr:last-child td{ border-bottom:none; }
table.pp-sum td.k{ color:var(--ink-500); width:40%; padding-right:12px; }
table.pp-sum td.v{ color:var(--ink-900); font-weight:600; font-variant-numeric:tabular-nums; word-break:break-word; }
table.pp-sum td.v .sub{ display:block; font-weight:400; color:var(--ink-500); font-size:11.5px; margin-top:1px; }
table.pp-sum td.v.muted{ color:var(--ink-300); font-weight:400; }
.pp-open .pill{ display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:700; margin-right:4px; }
.pp-open .pill.c{ background:var(--st-complete-soft); color:var(--st-complete); }
.pp-open .pill.p{ background:var(--st-progress-soft); color:var(--st-progress); }
.pp-open .pill.n{ background:var(--st-notstart-soft); color:var(--st-notstart); }
.pp-open .warn{ color:var(--st-warning); }
.pp-fld{ margin-bottom:14px; }
.pp-fld label{ display:block; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-500); margin-bottom:5px; }
.pp-fld input{ width:100%; background:var(--surface-1); border:1px solid var(--line-300); color:var(--ink-900); border-radius:var(--radius); padding:8px 10px; font:inherit; font-size:13px; }
.pp-fld input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--glow-accent); }
.pp-fld input:disabled{ opacity:.5; }
.pp-fld input.bad{ border-color:var(--st-critical); box-shadow:0 0 0 3px var(--st-critical-soft); }
.pp-hint{ font-size:11.5px; color:var(--ink-500); margin-top:5px; }
.pp-hint a{ color:var(--accent-text); cursor:pointer; text-decoration:underline; }
.pp-row2{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:14px; align-items:start; }
.pp-row2 .pp-hint{ margin-top:22px; }
@media (max-width:520px){ .pp-row2{ grid-template-columns:minmax(0,1fr); gap:0; } .pp-row2 .pp-hint{ margin-top:5px; } }
.pp-note{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; background:var(--surface-1); border:1px solid var(--line-200); border-radius:var(--radius); margin:4px 0 14px; }
.pp-note .pp-ic{ color:var(--accent-text); margin-top:1px; width:16px; height:16px; }
.pp-note b{ display:block; font-size:12.5px; }
.pp-note span{ font-size:11.5px; color:var(--ink-500); }
.pp-msg{ margin-top:12px; padding:10px 12px; border-radius:var(--radius); font-size:12.5px; border:1px solid var(--line-200); background:var(--surface-1); color:var(--ink-700); }
.pp-msg.ok{ border-color:var(--st-complete-line); background:var(--st-complete-soft); color:var(--ink-900); }
.pp-msg.err{ border-color:var(--st-critical-line); background:var(--st-critical-soft); color:var(--ink-900); }
.pp-msg.warn{ border-color:var(--st-progress-line); background:var(--st-progress-soft); color:var(--ink-900); }
.pp-msg[hidden]{ display:none; }
.pp-foot{ max-width:1180px; width:100%; margin:0 auto; padding:6px 22px 22px; font-size:11px; color:var(--ink-300); }

/* loading and gate */
.pp-loading{ flex:1; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--ink-500); font-family:var(--font-ui); font-size:13px; background:var(--bg-app); }
.pp-spinner{ width:20px; height:20px; border:2px solid var(--line-300); border-top-color:var(--accent); border-radius:50%; animation:pp-spin .8s linear infinite; }
@keyframes pp-spin{ to{ transform:rotate(360deg); } }
.pp-gate{ flex:1; display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; background:var(--bg-app); font-family:var(--font-ui); font-size:13px; line-height:1.45; color:var(--ink-900); overflow:auto; }
.pp-gate-box{ max-width:520px; width:100%; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:22px; }
.pp-gate-box h2{ margin:0 0 6px; font-size:16px; }
.pp-gate-box p{ margin:0 0 14px; color:var(--ink-700); }
.pp-gate-box .pp-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pp-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--brand); color:var(--on-brand); padding:8px 16px; border-radius:var(--radius); font-size:12.5px; font-family:var(--font-ui); box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:opacity .2s; z-index:9999; }
.pp-toast.show{ opacity:1; }
.pp-toast.err{ background:var(--st-critical); }
@media (prefers-reduced-motion: reduce){ .pp-spinner{ animation:none; } .pp-toast{ transition:none; } }