/* Job bar for the visual tools. Uses the tools' own colour tokens (they share the camera's look). */
.jl{position:sticky;top:0;z-index:20;margin:-14px -16px 12px;padding:8px 16px;background:var(--panel,#fff);border-bottom:1px solid var(--line,#D3D7D4);box-shadow:0 2px 10px -6px rgba(0,0,0,.25);font-family:var(--f-body,system-ui,sans-serif)}
.jl-in{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;max-width:1400px;margin:0 auto}
.jl-brand{font-family:var(--f-display,system-ui);font-weight:700;font-size:1.05rem;letter-spacing:.02em;color:var(--ink,#1D2225)}
.jl select{font:inherit;font-size:.9rem;padding:5px 8px;border:1.5px solid var(--line,#D3D7D4);border-radius:7px;background:var(--panel,#fff);color:var(--ink,#1D2225);max-width:min(380px,70vw)}
.jl-job{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted,#5D666A);min-width:0}
.jl-open{font-size:.82rem;color:var(--muted,#5D666A);font-style:italic;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jl-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
.jl-acts button{padding:5px 11px;font-size:.95rem}
.jl-link,.jl a.btn{font-family:var(--f-display,system-ui);font-weight:600;font-size:.95rem;color:var(--ink,#1D2225);text-decoration:none;padding:5px 10px;border:1.5px solid var(--line,#D3D7D4);border-radius:7px;background:var(--sunk,#F4F5F3)}
.jl-msg{flex-basis:100%;font-size:.84rem;color:var(--muted,#5D666A);min-height:0}
.jl-msg:empty{display:none}
.jl-msg.ok{color:var(--good,#2F7D4F)} .jl-msg.bad{color:var(--bad,#B23A2B)}
.jl-msg a{color:var(--accent,#D9530F);font-weight:600}
@media (max-width:640px){.jl-acts{margin-left:0}.jl-open{flex-basis:100%}}
.jl-modal{position:fixed;inset:0;z-index:40;background:rgba(10,12,13,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.jl-modal[hidden]{display:none!important}
.jl-box{background:var(--panel,#fff);color:var(--ink,#1D2225);border-radius:10px;padding:14px;width:min(900px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:10px}
.jl-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.jl-head strong{font-family:var(--f-display,system-ui);font-size:1.2rem}
.jl-note{font-size:.88rem;color:var(--muted,#5D666A);margin:0}
.jl-note.bad{color:var(--bad,#B23A2B)}
.jl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.jl-tile{margin:0;border:1.5px solid var(--line,#D3D7D4);border-radius:8px;overflow:hidden;background:var(--sunk,#F4F5F3);display:flex;flex-direction:column}
.jl-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--line,#D3D7D4)}
.jl-tile figcaption{font-size:.8rem;font-weight:600;padding:5px 7px 0;display:flex;flex-direction:column}
.jl-tile figcaption span{font-weight:400;color:var(--muted,#5D666A);font-size:.74rem}
.jl-use{display:flex;flex-wrap:wrap;gap:4px;padding:6px 7px 7px}
.jl-use button{font-size:.85rem;padding:4px 8px;flex:1}
.jl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jl-list li{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line,#D3D7D4);border-radius:8px;padding:6px 8px}
.jl-list img{width:84px;height:56px;object-fit:cover;border-radius:4px;flex:none;background:var(--sunk,#F4F5F3)}
.jl-list div{flex:1;min-width:0;display:flex;flex-direction:column}
.jl-list span{font-size:.8rem;color:var(--muted,#5D666A)}
.jl-fl{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted,#5D666A)}
.jl-fl input{font:inherit;font-size:1rem;color:var(--ink,#1D2225);padding:7px 9px;border:1.5px solid var(--line,#D3D7D4);border-radius:7px;background:var(--panel,#fff)}
.jl-row{display:flex;flex-wrap:wrap;gap:8px}