/* ============================================================
   Quely Hero — "the queue" animation  (v2: matches real product)
   Faithful in-product shell (Inter, DS gray scale, 8px radius)
   + the add-work flow. All classes namespaced .qh-*.
   ============================================================ */

.qh-stage{
  position:relative;
  width:1240px;height:760px;
  background:var(--bg-elev,#fff);
  color:var(--fg,#030712);
  font-family:Inter,system-ui,sans-serif;
  display:flex;
  overflow:hidden;
  border-radius:14px;
}
.qh-stage *{box-sizing:border-box;}
.qh-stage ::-webkit-scrollbar{width:0;height:0;}

/* ---------------- sidebar: docked icon rail ---------------- */
.qh-side{
  flex:0 0 64px;width:64px;height:100%;position:relative;
  background:var(--gray-50,#F9FAFB);
  border-right:1px solid var(--gray-200,#E5E7EB);
  display:flex;flex-direction:column;align-items:center;
  padding:14px 0;gap:8px;
}
.qh-side .mark{width:30px;height:30px;display:block;margin-bottom:4px;}
.qh-rail-org{width:34px;height:34px;border-radius:50%;background:var(--brand-600,#5C28A4);
  color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.qh-railic{position:relative;width:42px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;color:var(--gray-500,#6B7280);}
.qh-railic.on{background:var(--brand-50,#F4ECFE);border:1px solid var(--brand-200,#CCABF7);color:var(--brand-600,#5C28A4);}
.qh-railic.on::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;width:3px;border-radius:3px;
  background:var(--brand-600,#5C28A4);}
.qh-feedback{position:absolute;left:0;top:47%;writing-mode:vertical-rl;transform:rotate(180deg);
  background:var(--quely-amber,#F7A325);color:#fff;font-weight:700;font-size:12px;letter-spacing:.01em;
  padding:13px 5px;border-radius:0 7px 7px 0;}
.qh-rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:11px;width:100%;}
.qh-rail-div{width:28px;height:1px;background:var(--gray-200,#E5E7EB);}
.qh-rail-foot img{width:32px;height:32px;border-radius:50%;display:block;}

/* ---------------- main ---------------- */
.qh-main{flex:1 1 auto;min-width:0;height:100%;display:flex;flex-direction:column;background:#fff;}
.qh-topbar{
  flex:0 0 auto;height:54px;border-bottom:1px solid var(--gray-200,#E5E7EB);
  display:flex;align-items:center;gap:10px;padding:0 20px;
}
.qh-crumb{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--gray-500,#6B7280);min-width:0;}
.qh-crumb .sep{color:var(--gray-300,#D1D5DB);}
.qh-crumb .cur{color:var(--gray-900,#111827);font-weight:600;}
.qh-topright{margin-left:auto;display:flex;align-items:center;gap:14px;}
.qh-ic{color:var(--gray-500,#6B7280);display:flex;}
.qh-timer{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono,'Geist Mono',monospace);font-size:15px;font-weight:600;
  letter-spacing:.06em;color:#5C28A4;background:#F4ECFE;border:1px solid #E3D2FB;
  border-radius:9px;padding:6px 12px;}
.qh-presence{display:flex;align-items:center;}
.qh-presence .pav{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-8px;
  display:block;box-shadow:0 0 0 1px var(--gray-200,#E5E7EB);}
.qh-presence .pav:first-child{margin-left:0;}
.qh-presence .more{width:28px;height:28px;border-radius:50%;margin-left:-8px;background:var(--gray-100,#F3F4F6);
  border:2px solid #fff;color:var(--gray-600,#4B5563);font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;}
.qh-invite{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  background:var(--gray-900,#111827);color:#fff;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap;}

/* queue body */
.qh-body{flex:1 1 auto;min-height:0;overflow:hidden;padding:20px 26px 0;position:relative;
  display:flex;flex-direction:column;}

/* filter bar: Status · Assignee · Search */
.qh-filters{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.qh-filt{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid var(--gray-200,#E5E7EB);
  border-radius:10px;background:#fff;font-size:14px;font-weight:600;color:var(--gray-700,#374151);white-space:nowrap;}
.qh-filt svg{color:var(--gray-400,#9CA3AF);}
.qh-searchbar{flex:1 1 auto;display:flex;align-items:center;gap:10px;padding:9px 15px;
  border:1px solid var(--gray-200,#E5E7EB);border-radius:10px;background:#fff;color:var(--gray-400,#9CA3AF);font-size:14px;}

/* queue title row */
.qh-qtitle{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.qh-qtitle .qh-qtitle-h{font-size:21px;font-weight:700;letter-spacing:-0.02em;color:var(--gray-900,#111827);margin:0;}
.qh-qcount{width:24px;height:24px;border-radius:50%;background:var(--gray-100,#F3F4F6);color:var(--gray-600,#4B5563);
  font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.qh-issuesleft{margin-left:auto;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;
  color:var(--gray-500,#6B7280);}
.qh-check{width:22px;height:22px;border-radius:50%;background:var(--green-600,#16A34A);color:#fff;
  display:flex;align-items:center;justify-content:center;}

/* list */
.qh-list{display:flex;flex-direction:column;gap:0;flex:1 1 auto;min-height:0;overflow:hidden;}
.qh-row{
  display:flex;align-items:center;gap:13px;
  padding:11px 8px;border-bottom:1px solid var(--gray-100,#F3F4F6);background:#fff;border-radius:8px;
}
.qh-row.fresh{background:var(--brand-50,#F4ECFE);box-shadow:inset 3px 0 0 var(--brand-500,#8D4BF6);
  border-bottom:none;margin-bottom:7px;}
.qh-row.fresh + .qh-row:not(.fresh){border-top:1px solid var(--gray-100,#F3F4F6);}
@media (prefers-reduced-motion: no-preference){
  .qh-row.fresh.enter{animation:qhLand .55s cubic-bezier(.2,.75,.3,1);}
}
.qh-grip{flex:0 0 auto;color:var(--gray-300,#D1D5DB);display:flex;}
.qh-srcpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:7px 11px;
  border:1px solid var(--gray-200,#E5E7EB);border-radius:9px;background:#fff;
  box-shadow:0 1px 1px 0 rgba(3,7,18,.04);}
.qh-srcpill .lg{width:17px;height:17px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.qh-srckey{font-size:13.5px;font-weight:600;color:var(--gray-800,#1F2937);white-space:nowrap;}
.qh-openic{color:var(--gray-400,#9CA3AF);display:flex;}
.qh-rtitle{font-size:15px;color:var(--gray-700,#374151);font-weight:400;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qh-rspace{flex:1 1 auto;}
.qh-points{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--gray-800,#1F2937);white-space:nowrap;}
.qh-points.ne{color:var(--gray-400,#9CA3AF);font-weight:500;}
.qh-menu{flex:0 0 auto;color:var(--gray-300,#D1D5DB);display:flex;}

/* add unit + total */
.qh-addrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:14px 0 12px;
  border-top:1px dashed var(--gray-200,#E5E7EB);margin-top:4px;}
.qh-addunit{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:9px;
  font-size:15px;font-weight:600;color:var(--gray-700,#374151);transition:background .15s ease,transform .15s ease;}
.qh-addunit.hot{background:var(--gray-100,#F3F4F6);transform:translateY(1px);}
.qh-addunit .pl{width:22px;height:22px;border-radius:50%;background:var(--gray-100,#F3F4F6);
  display:flex;align-items:center;justify-content:center;color:var(--gray-600,#4B5563);}
.qh-total{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:13px 6px;border-top:1px solid var(--gray-200,#E5E7EB);}
.qh-total .lb{font-size:14px;font-weight:500;color:var(--gray-600,#4B5563);}
.qh-total .pts{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--gray-900,#111827);}
.qh-total .pts .d{width:9px;height:9px;border-radius:50%;background:var(--green-600,#16A34A);}

/* ---------------- modals ---------------- */
.qh-scrim{position:absolute;inset:0;background:rgba(3,7,18,.32);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:30;}
.qh-scrim.show{opacity:1;}
.qh-modal{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);
  background:#fff;border-radius:16px;border:1px solid var(--gray-200,#E5E7EB);
  box-shadow:0 24px 60px -12px rgba(3,7,18,.4);
  opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.75,.3,1);
  z-index:31;overflow:hidden;
}
.qh-modal.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.qh-modal.chooser{width:486px;}
.qh-modal.picker{width:640px;}
.qh-mhead{padding:18px 22px 14px;position:relative;}
.qh-mhead .x{position:absolute;top:16px;right:18px;color:var(--gray-400,#9CA3AF);display:flex;}
.qh-mhead h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--gray-900,#111827);}
.qh-mhead p{margin:5px 0 0;font-size:13.5px;color:var(--gray-500,#6B7280);max-width:92%;}
.qh-mbody{padding:4px 22px 22px;}

/* chooser tiles */
.qh-tiles{display:flex;flex-direction:column;gap:10px;}
.qh-tile{display:flex;align-items:flex-start;gap:14px;padding:15px 16px;border:1px solid var(--gray-200,#E5E7EB);
  border-radius:12px;background:#fff;transition:border-color .15s,background .15s,box-shadow .15s;}
.qh-tile.hot{border-color:var(--brand-300,#B585F2);background:var(--brand-50,#F4ECFE);
  box-shadow:0 0 0 3px var(--brand-50,#F4ECFE);}
.qh-tile .tic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;}
.qh-tic-work{background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#fff;}
.qh-tic-ctx{background:var(--indigo-100,#E0E7FF);color:var(--indigo-600,#4F46E5);}
.qh-tic-group{background:#DBEAFE;color:#2563EB;}
.qh-tile .ttx{flex:1 1 auto;min-width:0;}
.qh-tile .ttx .tt{display:flex;align-items:baseline;gap:9px;}
.qh-tile .ttx b{font-size:15px;font-weight:600;color:var(--gray-900,#111827);}
.qh-tile .ttx .q{font-size:12.5px;color:var(--gray-400,#9CA3AF);}
.qh-tile .ttx p{margin:3px 0 0;font-size:13px;color:var(--gray-500,#6B7280);line-height:1.4;}
.qh-tile .tarr{margin-left:auto;color:var(--gray-300,#D1D5DB);align-self:center;}

/* picker grid */
.qh-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.qh-pcard{position:relative;padding:14px 15px;border:1px solid var(--gray-200,#E5E7EB);border-radius:12px;
  background:#fff;transition:border-color .15s,background .15s,box-shadow .15s;}
.qh-pcard.hot{border-color:var(--brand-300,#B585F2);background:var(--brand-50,#F4ECFE);
  box-shadow:0 0 0 3px var(--brand-50,#F4ECFE);}
.qh-pcard.span2{grid-column:1 / -1;}
.qh-pconn{position:absolute;top:13px;right:14px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--gray-300,#D1D5DB);background:#fff;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s;}
.qh-pconn.on{background:var(--green-600,#16A34A);border-color:var(--green-600,#16A34A);}
.qh-pc-hd{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.qh-pc-hd .lg{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.qh-pc-hd b{font-size:15px;font-weight:600;color:var(--gray-900,#111827);}
.qh-pc-desc{font-size:12.5px;color:var(--gray-500,#6B7280);margin:0 0 10px;line-height:1.4;}
.qh-ptags{display:flex;flex-wrap:wrap;gap:6px;}
.qh-ptag{font-size:11.5px;font-weight:600;color:var(--indigo-700,#4338CA);background:var(--indigo-50,#EEF2FF);
  border-radius:6px;padding:3px 8px;}
.qh-search-pill{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--gray-200,#E5E7EB);
  border-radius:10px;background:var(--gray-50,#F9FAFB);color:var(--gray-400,#9CA3AF);font-size:13.5px;margin-bottom:14px;}

/* ---------------- caption ---------------- */
.qh-cap{position:absolute;left:26px;bottom:84px;z-index:40;display:inline-flex;align-items:center;gap:10px;
  background:var(--gray-900,#111827);color:#fff;border-radius:10px;padding:9px 15px;white-space:nowrap;
  font-size:13px;font-weight:500;box-shadow:4px 4px 0 var(--quely-amber,#F7A325);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;}
.qh-cap.show{opacity:1;transform:none;}
.qh-cap .cd{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--quely-amber,#F7A325);}
.qh-cap b{font-weight:700;color:#fff;}

/* ---------------- cursor ---------------- */
.qh-cursor{position:absolute;top:0;left:0;width:24px;height:24px;z-index:60;pointer-events:none;
  transform:translate(-100px,-100px);transition:transform .52s cubic-bezier(.33,1,.68,1);
  will-change:transform;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
.qh-cursor svg{display:block;}
.qh-click{position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;z-index:59;
  border:2px solid var(--brand-500,#8D4BF6);transform:translate(-100px,-100px) scale(0);opacity:0;pointer-events:none;}
.qh-click.fire{animation:qhRipple .5s ease-out;}

@keyframes qhPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5);}70%{box-shadow:0 0 0 6px rgba(22,163,74,0);}100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}}
@keyframes qhLand{from{transform:translateY(-14px);}to{transform:none;}}
@keyframes qhRipple{0%{transform:translate(var(--cx,-100px),var(--cy,-100px)) scale(.3);opacity:.9;}100%{transform:translate(var(--cx,-100px),var(--cy,-100px)) scale(1.5);opacity:0;}}

@media (prefers-reduced-motion: reduce){
  .qh-cursor{transition:none;}
}