/* ============================================================
   Packshoty (plansza 5c) — widok dwuszpaltowy: lewa szyna
   NOWA SESJA + lista SESJE, prawa kolumna szczegół aktywnej
   sesji. Tokeny wyłącznie z tokens.css.
   ============================================================ */

/* --- layout dwuszpaltowy --- */
.ps-layout{display:grid;grid-template-columns:320px 1fr;align-items:stretch;min-height:calc(100vh - 120px)}
.ps-rail{border-right:1px solid var(--border);padding:4px 24px 32px 4px}
.ps-detail{padding:4px 8px 40px 32px;min-width:0}
.ps-rail-label{font:600 var(--font-size-xs) var(--font-ui);letter-spacing:.14em;color:var(--text-tertiary)}

/* --- NOWA SESJA: dropzone + perspektywa + model --- */
.ps-drop{border:1.5px dashed var(--border-strong);border-radius:var(--radius-4);padding:22px 16px;text-align:center;cursor:pointer;margin-top:12px;transition:border-color .12s,background .12s}
.ps-drop:hover{border-color:var(--accent)}
.ps-drop.is-drag{border-color:var(--accent);background:var(--accent-dim-bg)}
.ps-drop img.preview{max-width:100%;max-height:96px;border-radius:var(--radius-2);margin-bottom:6px}
.ps-model-pick{display:flex;align-items:center;gap:8px;background:var(--surface-inset);border:1px solid var(--border-field);border-radius:var(--radius-2);padding:5px 9px;color:var(--text-primary);font-size:var(--font-size-base)}
.ps-model-pick svg{color:var(--text-tertiary)}

/* --- lista SESJE --- */
.ps-session-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.ps-session-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid transparent;border-radius:var(--radius-3);cursor:pointer}
.ps-session-row:hover{background:var(--surface-hover)}
.ps-session-row.is-active{background:var(--surface-1);border-color:var(--border-chip)}
.ps-session-row.is-active:hover{background:var(--surface-1)}
.ps-thumb{width:28px;height:28px;border-radius:var(--radius-2);border:1px solid var(--border-field);flex:none;background:repeating-linear-gradient(45deg,var(--checker-a) 0 6px,var(--checker-b) 6px 12px)}
.ps-session-main{flex:1;min-width:0}
.ps-session-name{font-size:var(--font-size-base);font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-session-row:not(.is-active) .ps-session-name{color:var(--text-soft);font-weight:400}
.ps-session-meta{font:400 var(--font-size-2xs) var(--font-mono);color:var(--text-tertiary);margin-top:1px}
.ps-session-row:not(.is-active) .ps-session-meta{color:var(--text-faint)}

/* --- nagłówek sesji --- */
.ps-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ps-head-title{font-size:18px;font-weight:600;letter-spacing:-.01em}
.ps-badge{font-size:var(--font-size-sm);font-weight:500;padding:2px 8px;border-radius:var(--radius-pill);background:var(--accent-dim-bg);color:var(--accent-soft);border:1px solid var(--accent-dim-border)}
.ps-badge.is-all{background:var(--success-dim-bg);color:var(--success);border-color:var(--success-dim-border)}
.ps-head-meta{font:400 var(--font-size-sm) var(--font-mono);color:var(--text-faint);margin-top:8px}

/* --- add-job (dodawanie kolejnych jobów do sesji) --- */
.ps-addjob{display:grid;grid-template-columns:240px 200px 1fr auto;gap:12px;align-items:end;margin-top:18px}

/* --- siatka jobów --- */
.session-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:16px;margin-top:22px}
.job-card{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-4);padding:12px}
.job-card.is-accepted{border-color:var(--success-dim-border)}
.job-card.is-failed{border-color:var(--danger-dim-border)}
.job-card.is-queued{opacity:.65}

/* --- podgląd joba + badge stanu --- */
.job-preview{position:relative;aspect-ratio:1;border:1px solid var(--border-field);border-radius:var(--radius-2);background:repeating-linear-gradient(45deg,var(--checker-a) 0 9px,var(--checker-b) 9px 18px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.job-card.is-queued .job-preview{background:none;border-style:dashed}
.job-card.is-failed .job-preview{opacity:.6}
.job-preview img{width:100%;height:100%;object-fit:contain;cursor:pointer}
.job-preview .j-empty{font:400 9px var(--font-mono);color:var(--text-ghost,var(--text-ghost))}
.job-badge{position:absolute;top:6px;left:6px;font:500 9px var(--font-mono);border-radius:var(--radius-1);padding:1px 6px;z-index:1}
.job-badge.is-accepted{font-weight:600;letter-spacing:.05em;color:var(--success);background:var(--success-dim-bg);border:1px solid var(--success-dim-border)}
.job-badge.is-done{color:var(--success-muted);background:rgba(60,232,160,.1);border:1px solid rgba(60,232,160,.25)}
.job-badge.is-running{color:var(--accent-soft);background:var(--accent-dim-bg);border:1px solid var(--accent-dim-border)}
.job-badge.is-failed{color:var(--danger);background:var(--danger-dim-bg);border:1px solid var(--danger-dim-border)}
.job-badge.is-queued{color:var(--text-secondary);background:var(--surface-hover);border:1px solid var(--border-chip)}
.job-progress{position:absolute;left:10px;right:10px;bottom:10px;height:3px;background:var(--surface-1);border-radius:var(--radius-pill);overflow:hidden}
.job-progress span{display:block;width:64%;height:100%;background:repeating-linear-gradient(90deg,var(--accent) 0 12px,var(--accent-soft) 12px 24px);animation:ps-flow .9s linear infinite}
@keyframes ps-flow{to{background-position:24px 0}}

/* --- chipy kroków (10 etapów, etykiety PL) --- */
.step-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.step-chip{font:400 var(--font-size-2xs) var(--font-mono);color:var(--text-tertiary);white-space:nowrap}
.step-chip.is-todo{color:var(--text-disabled)}
.step-chip.is-done{color:var(--text-tertiary)}
.step-chip.is-done .mk{color:var(--success)}
.step-chip.is-active{color:var(--accent-soft)}
.step-chip.is-failed{color:var(--danger)}

/* --- notka QA + stopka joba --- */
.qa-note{font-size:var(--font-size-sm);color:var(--text-tertiary);margin-top:10px;line-height:1.5}
.qa-note.is-pass{color:var(--success)}
.qa-note.is-fail{color:var(--danger)}
.job-foot{display:flex;gap:12px;align-items:center;margin-top:10px}
.job-id{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint)}