/* v5: cross-device collection controls + PC-only interaction/layout corrections. */

/* Keep the close control at the actual far-right edge of the sheet header.
   The bulk-select toggle is injected later, so explicit ordering prevents it
   from pushing the close button inward. */
.collection-head{
  display:flex!important;
  align-items:flex-start!important;
  gap:8px!important;
}
.collection-head>div:first-child{
  flex:1 1 auto!important;
  min-width:0!important;
  margin-right:auto!important;
}
.collection-head .collection-select-toggle{
  order:2!important;
  flex:0 0 auto!important;
  margin-left:0!important;
}
#collectionClose.collection-close{
  order:3!important;
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  margin-left:0!important;
  padding:0!important;
  text-indent:0!important;
  line-height:1!important;
  font-size:0!important;
  overflow:visible!important;
}
#collectionClose.collection-close::before,
#collectionClose.collection-close::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:14px!important;
  height:2px!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
#collectionClose.collection-close::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}
#collectionClose.collection-close::after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}

/* Device handoff now stays inside the already-open collection sheet instead
   of launching the retired question modal. */
.collection-device-panel{
  display:grid;
  gap:12px;
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(127,127,127,.22);
  border-radius:16px;
  background:rgba(127,127,127,.06);
}
.collection-device-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.collection-device-panel__head strong{
  display:block;
  font-size:14px;
  line-height:1.35;
}
.collection-device-panel__head p{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.5;
  opacity:.72;
}
.collection-device-panel__back{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:inherit;
  padding:4px 2px;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  opacity:.74;
}
.collection-device-panel__group{
  display:grid;
  gap:7px;
}
.collection-device-panel__group>label{
  font-size:11px;
  font-weight:700;
  opacity:.7;
}
.collection-device-panel__code-row,
.collection-device-panel__connect-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.collection-device-panel input{
  min-width:0;
  height:40px;
  box-sizing:border-box;
  border:1px solid rgba(127,127,127,.24);
  border-radius:11px;
  background:rgba(127,127,127,.08);
  color:inherit;
  padding:0 11px;
  font:500 12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  outline:none;
}
.collection-device-panel input:focus{
  border-color:rgba(83,139,255,.68);
  box-shadow:0 0 0 3px rgba(70,125,255,.12);
}
.collection-device-panel button[data-device-sync-copy],
.collection-device-panel button[data-device-sync-connect]{
  min-height:40px;
  border:1px solid rgba(127,127,127,.22);
  border-radius:11px;
  padding:0 13px;
  background:rgba(127,127,127,.10);
  color:inherit;
  font:700 12px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
}
.collection-device-panel button[data-device-sync-connect]{
  background:linear-gradient(180deg,rgba(75,137,255,.96),rgba(44,101,211,.96));
  border-color:rgba(90,148,255,.78);
  color:#fff;
}
.collection-device-panel__status{
  min-height:18px;
  font-size:11px;
  line-height:1.55;
  opacity:.76;
}
.collection-device-panel__status.is-error{
  color:#e76565;
  opacity:1;
}

@media (max-width:640px){
  .collection-device-panel__code-row,
  .collection-device-panel__connect-row{
    grid-template-columns:1fr;
  }
}

@media (min-width:1024px){
  /* Every control that opens the saved-items sheet should advertise clickability. */
  #collectionFab,
  #savedVideoShortcut,
  #savedArticleShortcut,
  .collection-section-link{
    cursor:pointer!important;
  }

  /* Top-nav liquid chip: keep the accepted rail geometry, but let the moving
     indicator paint above the rail and restore the skin to absolute fill. */
  .nav-shell,
  .nav-shell .nav-glass,
  .nav-shell .nav-scroll,
  html[data-theme="light"] .nav-shell .nav-scroll,
  html[data-theme="dark"] .nav-shell .nav-scroll{
    overflow:visible!important;
  }
  .nav-shell .nav-scroll{
    position:relative!important;
  }
  .nav-shell .nav-scroll .nav-v33-indicator{
    position:absolute!important;
    left:0!important;
    top:0!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:30!important;
    overflow:visible!important;
    pointer-events:none!important;
    border-radius:999px!important;
  }
  .nav-shell .nav-scroll .nav-v33-indicator>.v37-liquid-skin{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:1!important;
    overflow:visible!important;
    border-radius:inherit!important;
    pointer-events:none!important;
  }
  .nav-shell .nav-scroll .nav-chip{
    position:relative!important;
    z-index:40!important;
  }

  /* Market cards use three stable vertical zones on desktop:
     1) rank + title (title reserves exactly two lines),
     2) price block (fixed height),
     3) customer/use-case copy aligned to the bottom. */
  .market-card{
    display:flex!important;
    flex-direction:column!important;
    height:452px!important;
    min-height:452px!important;
    max-height:452px!important;
  }
  .market-card__body{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    min-width:0!important;
    min-height:0!important;
  }
  .market-card__body>h3{
    box-sizing:border-box!important;
    height:2.56em!important;
    min-height:2.56em!important;
    max-height:2.56em!important;
    margin-bottom:0!important;
    line-height:1.28!important;
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
    overflow:hidden!important;
  }
  .market-card__prices{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    min-width:0!important;
    height:76px!important;
    min-height:76px!important;
    max-height:76px!important;
    margin-top:12px!important;
  }
  .market-card__price{
    min-width:0!important;
    height:100%!important;
    box-sizing:border-box!important;
  }
  .market-card__price b{
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  .market-card__customer{
    display:flex!important;
    align-items:flex-end!important;
    box-sizing:border-box!important;
    margin-top:auto!important;
    padding-top:12px!important;
    min-height:3.1em!important;
    line-height:1.45!important;
    word-break:keep-all!important;
  }
}