/* Queue panel (client/queue.js): edge tab on the left of the Base and Map views + the slide-out list of every timer.
   Lives inside #view. Closed, nothing but the small tab takes touches; open, the panel sits above the HUD and the
   building ring (z 6 / 7) and below the sheets (z 20). */
.qp-off { display: none !important; }

/* the job chips on the Base view say the same thing as the Shelter tab: hidden while the HUD (and so the tab) is up */
#view.has-hud #queue { display: none; }

/* ---------- edge tab ---------- */
#qp-tab { position: absolute; left: 0; top: 40%; z-index: 6; width: 28px; height: 60px; padding: 0 2px 0 0; border: 0; border-radius: 0 12px 12px 0; display: grid; align-content: center; justify-items: center; gap: 1px;
  color: #f3e6cf; background: linear-gradient(90deg, #4a3520, #6b4a2e); box-shadow: 2px 0 0 #2a1a0c, inset 0 2px 0 rgba(255,220,160,.25), 0 4px 10px rgba(0,0,0,.5);
  transition: left .22s ease; touch-action: none; -webkit-tap-highlight-color: transparent; }
#qp-tab .qp-grip { font-size: 13px; line-height: 1; opacity: .9; }
#qp-tab .qp-arrow { font: 900 20px/0.8 system-ui; color: var(--accent); text-shadow: 0 1px 0 #000; }
#qp-tab:active { filter: brightness(1.15); }
#qp-tab.open { z-index: 10; left: var(--qp-w); }
.qp-n { display: none; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; place-items: center; background: #e33; color: #fff; font: 800 10px/1 system-ui; font-style: normal; box-shadow: 0 0 0 2px #fff; }
.qp-n.show { display: grid; }
#qp-tab .qp-n { position: absolute; top: -7px; right: -6px; animation: qpPulse 2.4s ease-in-out infinite; }
@keyframes qpPulse { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.18); } }

/* ---------- panel ---------- */
#view { --qp-w: min(300px, calc(100% - 70px)); }
#qp-scrim { position: absolute; inset: 0; z-index: 9; background: linear-gradient(90deg, rgba(5,8,6,.5), rgba(5,8,6,.18)); opacity: 0; pointer-events: none; transition: opacity .22s ease; touch-action: none; }
#qp-scrim.open { opacity: 1; pointer-events: auto; }
#qp { position: absolute; left: 0; top: 0; bottom: 0; z-index: 9; width: var(--qp-w); display: flex; flex-direction: column; color: var(--text);
  background: linear-gradient(#1f2b24, #141d17); border-right: 2px solid var(--pn-gold2, var(--c-amber-lo)); box-shadow: 6px 0 22px rgba(0,0,0,.55);
  transform: translateX(-105%); visibility: hidden; pointer-events: none; transition: transform .22s ease, visibility 0s linear .22s; touch-action: pan-y; }
#qp.open { transform: none; visibility: visible; pointer-events: auto; transition: transform .22s ease, visibility 0s; }
.qp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; background: var(--pn-wood, linear-gradient(#3a2a17, #241808)); border-bottom: 2px solid var(--pn-gold2, var(--c-amber-lo)); }
.qp-head b { display: block; font: 800 16px/1.1 system-ui; color: var(--accent); letter-spacing: .02em; text-shadow: 0 1px 0 #000; }
.qp-head small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.qp-x { width: 34px; height: 34px; padding: 0; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid #5a3f20; color: var(--accent); font-size: 15px; }
.qp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 8px 0; }
.qp-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 6px; border-radius: 10px 10px 0 0; border: 1px solid var(--line); border-bottom: 0; background: #17211b; color: var(--muted); }
.qp-tabs button b { font: 800 13px/1 system-ui; }
.qp-tabs button.on { background: linear-gradient(#8a6038, #5a3c20); border-color: #b88a5a; color: #fff; box-shadow: inset 0 2px 0 rgba(255,220,160,.3); }
.qp-tabs .qp-n { position: absolute; top: -5px; right: -3px; }
.qp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px calc(14px + var(--safe-bottom)); border-top: 2px solid #b88a5a; scrollbar-width: thin; }
.qp-body h3 { margin: 10px 2px 5px; font: 800 11px/1 system-ui; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); opacity: .9; }
.qp-empty { padding: 24px 8px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- rows ---------- */
.qp-row { display: grid; grid-template-columns: 36px 1fr auto 26px; align-items: center; gap: 8px; min-height: 50px; margin-bottom: 5px; padding: 6px 4px 6px 7px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(#24332a, #1a251e); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--c-ink); -webkit-tap-highlight-color: transparent; }
.qp-row:active { transform: translateY(1px); filter: brightness(1.12); }
.qp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.qp-ico { position: relative; width: 36px; height: 36px; display: grid; place-items: center; font-size: 19px; border-radius: 10px; background: radial-gradient(circle at 50% 30%, #3b4e41, #18221c); border: 1px solid #40564a; }
.qp-dot { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: #e33; box-shadow: 0 0 0 2px #1a251e, 0 0 6px rgba(255,60,60,.7); }
.qp-main { min-width: 0; display: grid; gap: 3px; }
.qp-line { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.qp-name { font: 800 13px/1.15 system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-time { flex: none; font: 800 12px/1 system-ui; color: #ffe9b0; font-variant-numeric: tabular-nums; }
.qp-sub { font-size: 11.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-row.idle .qp-sub, .qp-row.warn .qp-sub { color: #ff8a7d; font-weight: 700; }
.qp-row.idle, .qp-row.warn { border-color: #6a3a33; }
.qp-row.ready .qp-sub { color: #9be86b; }
.qp-bar { height: 6px; border-radius: 3px; background: var(--c-ink); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.qp-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #3fae5a, #9be86b); transition: width .9s linear; }
.qp-row.near .qp-bar i { background: linear-gradient(90deg, #4fd06a, #c8ff8a); box-shadow: 0 0 6px rgba(140,255,120,.8); }
.qp-row.warn .qp-bar i { background: linear-gradient(90deg, #c8392e, #ff7a5c); }
.qp-speed { width: 30px; height: 30px; padding: 0; border-radius: 9px; font-size: 13px; background: linear-gradient(#ffb15a, #d7642a); border: 1px solid #fff3; }
.qp-row > .qp-go { grid-column: 4; width: 26px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(0,0,0,.3); color: var(--accent); font: 900 20px/1 system-ui; }

/* ---------- landscape phone / desktop ---------- */
html.land #view { --qp-w: min(310px, 46%); }
html.land .qp-head { padding-top: 5px; padding-bottom: 5px; } html.land .qp-x { width: 30px; height: 30px; }
html.land .qp-tabs { padding-top: 5px; } html.land .qp-tabs button { height: 32px; }
html.land .qp-row { min-height: 44px; padding-top: 4px; padding-bottom: 4px; margin-bottom: 4px; }
html.land .qp-ico { width: 32px; height: 32px; font-size: 17px; }
html.land #qp-tab { height: 52px; }
@media (min-width: 700px) { html:not(.land) #view { --qp-w: 340px; } }
@media (prefers-reduced-motion: reduce) { #qp, #qp-tab, #qp-scrim, .qp-bar i { transition: none; } #qp-tab .qp-n { animation: none; } }